import { Meta, StoryObj } from "@storybook/nextjs-vite";
import SelectInput from "./SelectInput";
import { fn } from "storybook/test";
import { useState } from "react";
import { useDateInput } from "@/hooks/useDateInput";
import Typography from "../Typography/Typography";

/** Reusable SelectInput Component */
const meta: Meta<typeof SelectInput> = {
  title: "UI/SelectInput",
  component: SelectInput,
  tags: ["autodocs"],
  args: {
    defaultValue: "01",
    onValueChange: fn(),
  },
  argTypes: {
    value: {
      control: { type: "text" },
    },
    options: {
      control: { type: "object" },
    },
  },
  render: (args) => {
    const { dayOptions } = useDateInput({});
    const [value, setValue] = useState(args.defaultValue);

    return (
      <div className="flex flex-col gap-2">
        <Typography>Value: {value}</Typography>
        <SelectInput
          {...args}
          value={value}
          onValueChange={(value: string) => {
            setValue(value);
            args.onValueChange?.(value);
          }}
          options={dayOptions}
        />
      </div>
    );
  },
};

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

export const Default = {} satisfies Story;

export const Disabled = {
  args: {
    disabled: true,
  },
} satisfies Story;

export const WithLabel = {
  args: {
    label: "Month",
    placeholder: "MM",
    defaultValue: undefined,
  },
} satisfies Story;

export const WithPlaceholder = {
  args: {
    placeholder: "Placeholder",
    defaultValue: undefined,
  },
} satisfies Story;

export const WithError = {
  args: {
    placeholder: "With Error",
    // "aria-invalid": true,
    error: true,
    errorProps: {
      children: "Error",
    },
  },
} satisfies Story;
