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

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

export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = (args: AsyncInputProps) => {
  const [inputValue, setInputValue] = useState<string>("");
  const [status, setStatus] = useState<AsyncStatus>("DEFAULT");

  const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(e.currentTarget.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 (
    <AsyncInput
      {...args}
      value={inputValue}
      onChange={handleOnChange}
      onSearch={handleOnSearch}
      isError={() => status === "ERROR"}
      isLoading={() => status === "LOADING"}
      isSuccess={() => status === "SUCCESS"}
    />
  );
};

Default.args = {
  value: "",
  isError: () => false,
  isLoading: () => false,
  isSuccess: () => false,
  placeholder: "검색",
};

export const Loading: Story = (args: AsyncInputProps) => {
  const [inputValue, setInputValue] = useState<string>("");

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

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

  return (
    <AsyncInput
      {...args}
      value={inputValue}
      onChange={handleOnChange}
      onSearch={handleOnSearch}
    />
  );
};

Loading.args = {
  value: "",
  isError: () => false,
  isLoading: () => true,
  isSuccess: () => false,
  placeholder: "검색",
};

export const Success: Story = (args: AsyncInputProps) => {
  const [inputValue, setInputValue] = useState<string>("");

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

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

  return (
    <AsyncInput
      {...args}
      value={inputValue}
      onChange={handleOnChange}
      onSearch={handleOnSearch}
    />
  );
};

Success.args = {
  value: "",
  isError: () => false,
  isLoading: () => false,
  isSuccess: () => true,
  placeholder: "검색",
};

export const Error: Story = (args: AsyncInputProps) => {
  const [inputValue, setInputValue] = useState<string>("");

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

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

  return (
    <AsyncInput
      {...args}
      value={inputValue}
      onChange={handleOnChange}
      onSearch={handleOnSearch}
    />
  );
};

Error.args = {
  value: "",
  isError: () => true,
  isLoading: () => false,
  isSuccess: () => false,
  placeholder: "검색",
};
