import React, { useState } from "react";
import type { Decorator, Meta, StoryFn } from "@storybook/react";

import { ThemeProviderWithStyledEngine, DatePicker } from "../index";

const disabled = {
  table: {
    disable: true,
  },
};

const decorator: Decorator<unknown> = (Story) => (
  <ThemeProviderWithStyledEngine>{Story()}</ThemeProviderWithStyledEngine>
);

const meta = {
  title: "Components/Inputs/DatePicker",
  component: DatePicker,
  argTypes: {
    value: disabled,
    onChange: disabled,
    hiddenLabel: disabled,
    maxLength: disabled,
    focused: disabled,
    rightIcon: disabled,
  },
  decorators: [decorator],
} satisfies Meta<typeof DatePicker>;

export default meta;

const Template: StoryFn<typeof DatePicker> = (args) => {
  const [date, setDate] = useState<Date | undefined>(undefined);

  return (
    <DatePicker
      {...args}
      value={date}
      onChange={(_e, newDate) => setDate(newDate)}
    />
  );
};

export const Default: StoryFn<typeof DatePicker> = Template.bind({});

Default.args = {
  fullWidth: true,
  label: "Birthday",
  required: false,
  error: false,
  errorText: "It's wrong",
  disabled: false,
  height: "40",
};
