import { options, OptionTypes } from "../DropdownOptionData";
import { Meta, StoryObj } from "@storybook/react";
import MultipleDropdown, { MultipleDropdownProps } from "./MultipleDropdown";
import { useState } from "react";

const meta = {
  title: "component/Dropdown/MultipleDropdown",
  component: MultipleDropdown,
  decorators: [
    (Story) => (
      <div
        style={{
          width: "850px",
          display: "flex",
          justifyContent: "center",
          overflow: "visible",
        }}
      >
        <Story />
      </div>
    ),
  ],
  parameters: {
    layout: "centered",
    docs: {
      story: {
        height: "500px",
      },
    },
  },
  argTypes: {
    disable: { control: "boolean" },
  },
  tags: ["autodocs"],
} satisfies Meta<typeof MultipleDropdown>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = (args: MultipleDropdownProps<OptionTypes>) => {
  const [selectedValues, setSelectedValues] = useState<OptionTypes[]>([]);

  const handleOnClick = (value: OptionTypes | undefined) => {
    if (value === undefined) setSelectedValues([]);
    else if (
      selectedValues.some((data) => value?.phonePlanId === data.phonePlanId)
    ) {
      setSelectedValues(
        selectedValues.filter((v) => v.phonePlanId !== value?.phonePlanId)
      );
    } else setSelectedValues(selectedValues.concat(value!));
  };

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

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

export const JSX_Element: Story = (
  args: MultipleDropdownProps<OptionTypes>
) => {
  const [selectedValues, setSelectedValues] = useState<OptionTypes[]>([]);

  const handleOnClick = (value: OptionTypes | undefined) => {
    if (value === undefined) setSelectedValues([]);
    else if (
      selectedValues.some((data) => value?.phonePlanId === data.phonePlanId)
    ) {
      setSelectedValues(
        selectedValues.filter((v) => v.phonePlanId !== value?.phonePlanId)
      );
    } else setSelectedValues(selectedValues.concat(value!));
  };

  return (
    <MultipleDropdown
      {...args}
      selectedValues={selectedValues}
      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: "multi",
};
