import { ReactNode, useState } from "react";
import SelectInput, { SelectInputProps } from "./SelectInput";
import { Meta, StoryObj } from "@storybook/react";

const meta = {
  title: "component/Input/SelectInput",
  component: SelectInput,
  parameters: {
    layout: "centered",
  },
  tags: ["autodocs"],
} satisfies Meta<typeof SelectInput>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = (
  args: SelectInputProps<ReactNode | ReactNode[]>
) => {
  const [inputValue, setInputValue] = useState<string>("");

  const handleOnClick = () => {
    setInputValue("Cliked Button");
  };

  return (
    <SelectInput {...args} value={inputValue}>
      <button onClick={() => handleOnClick()} disabled={args.disable}>
        선택
      </button>
    </SelectInput>
  );
};

Default.args = {
  value: "",
  children: <div />,
  placeholder: "select",
};

export const Default2: Story = (
  args: SelectInputProps<ReactNode | ReactNode[]>
) => {
  const [inputValue, setInputValue] = useState<string>("Cliked Button");

  const handleOnClick = () => {
    setInputValue("Cliked Button");
  };

  const handleOnDelete = () => {
    setInputValue("");
  };

  return (
    <SelectInput {...args} value={inputValue}>
      <button onClick={() => handleOnClick()} disabled={args.disable}>
        선택
      </button>
      <button onClick={() => handleOnDelete()} disabled={args.disable}>
        삭제
      </button>
    </SelectInput>
  );
};

Default2.args = {
  value: "",
  children: <div />,
  placeholder: "select",
};
