import type { Meta, StoryObj } from '@storybook/react-vite';

import { DatePicker } from './DatePicker';

const meta: Meta<typeof DatePicker> = {
  title: 'UI kit/Form/Inputs/DatePicker',
  component: DatePicker,
  tags: ['autodocs'],
  argTypes: {
    width: {
      control: { type: 'radio' },
      options: ['sm', 'md'],
    },
    value: {
      control: { type: 'text' },
      description: 'Date value in ISO format (YYYY-MM-DD)',
    },
    label: {
      control: { type: 'text' },
      description: 'Label shown on small screens in dialog mode',
    },
    placeholder: {
      control: { type: 'text' },
      description: 'Placeholder date in ISO format (YYYY-MM-DD)',
    },
  },
};

export default meta;
type Story = StoryObj<typeof DatePicker>;

export const Default: Story = {
  args: {
    label: 'Select date',
    placeholder: '2024-01-01',
  },
};

export const WithValue: Story = {
  args: {
    label: 'Select date',
    value: '2024-12-25',
    placeholder: '2024-01-01',
  },
};

export const Error: Story = {
  args: {
    label: 'Select date',
    placeholder: '2024-01-01',
    error: true,
  },
};

export const Warning: Story = {
  args: {
    label: 'Select date',
    placeholder: '2024-01-01',
    warning: true,
  },
};

export const Loading: Story = {
  args: {
    label: 'Select date',
    placeholder: '2024-01-01',
    loading: true,
  },
};

export const Disabled: Story = {
  args: {
    label: 'Select date',
    placeholder: '2024-01-01',
    disabled: true,
  },
};

export const WithUnavailableDates: Story = {
  args: {
    label: 'Select date',
    placeholder: '2026-06-10',
    min: '2026-06-03',
    max: '2026-06-21',
    // Disable weekends and one specific weekday to demonstrate unavailable state styling.
    isDateUnavailable: date => {
      const isoDate = date.toString();
      const dayOfWeek = new Date(`${isoDate}T00:00:00Z`).getUTCDay();

      return dayOfWeek === 0 || dayOfWeek === 6 || isoDate === '2026-06-12';
    },
  },
};