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

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

export default meta;

type Story = StoryObj<typeof meta>;

export const Select_FormInput_Default: Story = (
  args: FormInputProps<ReactNode>
) => {
  const [inputValue, setInputValue] = useState("");

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

  return (
    <FormInput {...args}>
      <SelectInput
        value={inputValue}
        placeholder="default"
      >
        <button onClick={() => handleOnClick()}>선택</button>
      </SelectInput>
    </FormInput>
  );
};

Select_FormInput_Default.args = {
  label: "label",
  children: <div />,
  hintMessage: "hintmessage",
};

export const Select_FormInput_Error: Story = (
  args: FormInputProps<ReactNode>
) => {
  const [inputValue, setInputValue] = useState("");

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

  const handleOnError = () => {
    return true;
  };

  return (
    <FormInput {...args} onError={handleOnError}>
      <SelectInput
        value={inputValue}
        onError={handleOnError}
        placeholder="error"
      >
        <button onClick={() => handleOnClick()}>선택</button>
      </SelectInput>
    </FormInput>
  );
};

Select_FormInput_Error.args = {
  label: "label",
  children: <div />,
  errorMessage: "errormessage",
  onError: () => true,
};
