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

import { DateField } from './DateField';

// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
const meta: Meta<typeof DateField> = {
  title: 'UI kit/Form/DateField',
  component: DateField,
  tags: ['autodocs'],
  argTypes: { onChange: { action: 'onChange' } },
};

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

// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
export const Default: Story = {
  // More on args: https://storybook.js.org/docs/react/writing-stories/args
  args: {
    label: 'MyDateField',
    required: true,
  },
};

const ControlledTemplate: Story['render'] = args => {
  const [date, setDate] = React.useState<string | null>('2024-12-31');

  return <DateField {...args} value={date} onChange={setDate} />;
};

export const Controlled: Story = {
  args: {
    label: 'MyDateField',
    required: true,
  },
  argTypes: {
    value: { control: { disable: true } },
    onChange: { control: { disable: true } },
  },
  render: ControlledTemplate,
};

export const Disabled: Story = {
  args: {
    label: 'MyDateField',
    disabled: true,
    required: true,
  },
};

export const Justify: Story = {
  args: {
    label: 'MyDateField',
    justify: true,
    required: true,
  },
};

export const Required: Story = {
  args: {
    label: 'MyDateField',
    required: true,
  },
};

export const Tooltip: Story = {
  args: {
    label: 'MyDateField',
    tooltip: 'This is a tooltip for the date field.',
  },
};