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

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

export default meta;

type Story = StoryObj<typeof meta>;

export const Async_FormInput_Default: Story = (
  args: FormInputProps<ReactNode>
) => {
  const [inputValue, setInputValue] = useState("");
  const [status, setStatus] = useState<AsyncStatus>("DEFAULT");

  const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(e.target.value);

    if (!e.target.value) setStatus("DEFAULT");
    if ((status === "ERROR" || status === "SUCCESS") && e.target.value)
      setStatus("DEFAULT");
  };

  const handleOnSearch = (value: string) => {
    console.log(`${value} 검색중`);

    if (!value) return setStatus("ERROR");

    setStatus("LOADING");

    setTimeout(function () {
      setStatus("SUCCESS");
    }, 2000);
  };

  return (
    <FormInput {...args}>
      <AsyncInput
        value={inputValue}
        onChange={handleOnChange}
        onSearch={handleOnSearch}
        isError={() => status === "ERROR"}
        isLoading={() => status === "LOADING"}
        isSuccess={() => status === "SUCCESS"}
        placeholder="default"
      />
    </FormInput>
  );
};

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

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

  const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(e.target.value);
  };

  const handleOnSearch = (value: string) => {
    console.log(`${value} 검색중`);
  };

  return (
    <FormInput {...args}>
      <AsyncInput
        value={inputValue}
        onChange={handleOnChange}
        onSearch={handleOnSearch}
        isError={() => false}
        isLoading={() => false}
        isSuccess={() => true}
        placeholder="default"
      />
    </FormInput>
  );
};

Async_FormInput_Success.args = {
  label: "label",
  children: <div />,
};

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

  const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(e.target.value);
  };

  const handleOnSearch = (value: string) => {
    console.log(`${value} 검색중`);
  };

  return (
    <FormInput {...args}>
      <AsyncInput
        value={inputValue}
        onChange={handleOnChange}
        onSearch={handleOnSearch}
        isError={() => true}
        isLoading={() => false}
        isSuccess={() => false}
        placeholder="default"
      />
    </FormInput>
  );
};

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