import { useState } from "react";
import SingleDropdown, { SingleDropdownProps } from "./SingleDropdown";
import { Meta, StoryObj } from "@storybook/react";
import {
  options,
  OptionTypes,
  OptionTypesDefaultValue,
} from "../DropdownOptionData";

const meta = {
  title: "component/Dropdown/SingleDropdown",
  component: SingleDropdown,
  parameters: {
    layout: "centered",
    docs: {
      story: {
        height: "450px",
      },
    },
  },
  argTypes: {
    disable: { control: "boolean" },
  },
  tags: ["autodocs"],
} satisfies Meta<typeof SingleDropdown>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = (args: SingleDropdownProps<OptionTypes>) => {
  const [selectedValue, setSelectedValue] = useState<OptionTypes>({
    ...OptionTypesDefaultValue,
  });

  const handleOnClick = (value: OptionTypes | undefined) => {
    setSelectedValue({ ...value! });
  };

  return (
    <SingleDropdown
      {...args}
      value={selectedValue}
      optionKey={(value) => value.phonePlanId}
      optionLabel={(value) => value.name}
      onClick={handleOnClick}
    />
  );
};

Default.args = {
  options: options,
  optionKey: () => "",
  optionLabel: () => "",
  placeholder: "single",
};

export const JSX_Element: Story = (args: SingleDropdownProps<OptionTypes>) => {
  const [selectedValue, setSelectedValue] = useState<OptionTypes>({
    ...OptionTypesDefaultValue,
  });

  const handleOnClick = (value: OptionTypes | undefined) => {
    setSelectedValue({ ...value! });
  };

  return (
    <SingleDropdown
      {...args}
      value={selectedValue}
      optionKey={(value) => value.phonePlanId}
      optionLabel={(value) => value.name}
      onClick={handleOnClick}
      optionElement={({ option }) => (
        <>
          <p>{option.name}</p>
          <span>{option.price.toLocaleString()}원</span>
        </>
      )}
    />
  );
};

JSX_Element.args = {
  options: options,
  optionKey: () => "",
  optionLabel: () => "",
  placeholder: "single",
};

export const Empty_Data: Story = (args: SingleDropdownProps<OptionTypes>) => {
  return <SingleDropdown {...args} />;
};

Empty_Data.args = {
  options: [],
  optionKey: () => "",
  optionLabel: () => "",
  placeholder: "single",
};
