import { Meta, StoryObj } from "@storybook/react";
import FormMultipleInput from "./FormMultipleInput";
import { ReactNode, useState } from "react";
import { FormInputProps } from "../FormInput/FormInput";
import Input from "../Input/Input";
import Checkbox from "../Checkbox/Checkbox";
import NumberInput from "../NumberInput/NumberInput";

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

export default meta;

type Story = StoryObj<typeof meta>;

export const PhoneNumber_FormInput_Default: Story = (
  args: FormInputProps<ReactNode[]>
) => {
  const [inputValue, setInputValue] = useState<{
    phone1: string;
    phone2: string;
    phone3: string;
  }>({ phone1: "", phone2: "", phone3: "" });

  const handleOnChange = (value: string, name: string = "") => {
    setInputValue({
      ...inputValue,
      [name]: value.replace(/[^0-9]/g, ""),
    });
  };

  return (
    <FormMultipleInput {...args}>
      <NumberInput
        name="phone1"
        value={inputValue.phone1}
        onChange={handleOnChange}
        unit=""
        enableButton={false}
        attributes={{ maxLength: 3 }}
        placeholder="000"
      />
      <NumberInput
        name="phone2"
        value={inputValue.phone2}
        onChange={handleOnChange}
        unit=""
        enableButton={false}
        attributes={{ maxLength: 4 }}
        placeholder="0000"
      />
      <NumberInput
        name="phone3"
        value={inputValue.phone3}
        onChange={handleOnChange}
        unit=""
        enableButton={false}
        attributes={{ maxLength: 4 }}
        placeholder="0000"
      />
    </FormMultipleInput>
  );
};

PhoneNumber_FormInput_Default.args = {
  label: "phone number",
  children: [<div />],
  hintMessage: "hintmessage",
  separator: "-",
};

export const PhoneNumber_FormInput_Error: Story = (
  args: FormInputProps<ReactNode[]>
) => {
  const [inputValue, setInputValue] = useState<{
    phone1: string;
    phone2: string;
    phone3: string;
  }>({ phone1: "", phone2: "", phone3: "" });

  const handleOnChange = (value: string, name: string = "") => {
    setInputValue({
      ...inputValue,
      [name]: value.replace(/[^0-9]/g, ""),
    });
  };

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

  return (
    <FormMultipleInput {...args} onError={handleOnError}>
      <NumberInput
        name="phone1"
        value={inputValue.phone1}
        onChange={handleOnChange}
        onError={handleOnError}
        unit=""
        enableButton={false}
        attributes={{ maxLength: 3 }}
        placeholder="000"
      />
      <NumberInput
        name="phone2"
        value={inputValue.phone2}
        onChange={handleOnChange}
        onError={handleOnError}
        unit=""
        enableButton={false}
        attributes={{ maxLength: 4 }}
        placeholder="0000"
      />
      <NumberInput
        name="phone3"
        value={inputValue.phone3}
        onChange={handleOnChange}
        onError={handleOnError}
        unit=""
        enableButton={false}
        attributes={{ maxLength: 4 }}
        placeholder="0000"
      />
    </FormMultipleInput>
  );
};

PhoneNumber_FormInput_Error.args = {
  label: "phone number",
  children: [<div />],
  errorMessage: "errormessage",
  onError: () => true,
  separator: "-",
};

export const Email_FormInput_Default: Story = (
  args: FormInputProps<ReactNode[]>
) => {
  const [inputValue, setInputValue] = useState<{
    email1: string;
    email2: string;
  }>({ email1: "", email2: "" });

  const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue({
      ...inputValue,
      [e.currentTarget.name]: e.currentTarget.value,
    });
  };

  return (
    <FormMultipleInput {...args}>
      <Input
        name="email1"
        value={inputValue.email1}
        onChange={handleOnChange}
        enableButton={false}
        placeholder="email"
      />
      <Input
        name="email2"
        value={inputValue.email2}
        onChange={handleOnChange}
        enableButton={false}
        placeholder="gmail.com"
      />
    </FormMultipleInput>
  );
};

Email_FormInput_Default.args = {
  label: "email",
  children: [<div />],
  hintMessage: "hintmessage",
  separator: "@",
};

export const Email_FormInput_Error: Story = (
  args: FormInputProps<ReactNode[]>
) => {
  const [inputValue, setInputValue] = useState<{
    email1: string;
    email2: string;
  }>({ email1: "", email2: "" });

  const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue({
      ...inputValue,
      [e.currentTarget.name]: e.currentTarget.value,
    });
  };

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

  return (
    <FormMultipleInput {...args} onError={handleOnError}>
      <Input
        name="email1"
        value={inputValue.email1}
        onChange={handleOnChange}
        onError={handleOnError}
        enableButton={false}
        placeholder="email"
      />
      <Input
        name="email2"
        value={inputValue.email2}
        onChange={handleOnChange}
        onError={handleOnError}
        enableButton={false}
        placeholder="gmail.com"
      />
    </FormMultipleInput>
  );
};

Email_FormInput_Error.args = {
  label: "email",
  children: [<div />],
  errorMessage: "errormessage",
  onError: () => true,
  separator: "@",
};

export const Checkbox_FormInput_Default: Story = (
  args: FormInputProps<ReactNode[]>
) => {
  const [isChecked, setIsChecked] = useState<string>("");

  const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setIsChecked(e.currentTarget.id);

    if (e.currentTarget.id === isChecked) setIsChecked("");
  };

  return (
    <FormMultipleInput {...args}>
      <Checkbox
        id="label1"
        checked={"label1" === isChecked}
        children="label1"
        onChange={handleOnChange}
      />
      <Checkbox
        id="label2"
        checked={"label2" === isChecked}
        children="label2"
        onChange={handleOnChange}
      />
      <Checkbox
        id="label3"
        checked={"label3" === isChecked}
        children="label3"
        onChange={handleOnChange}
      />
      <Checkbox
        id="label4"
        checked={"label4" === isChecked}
        children="label4"
        onChange={handleOnChange}
      />
      <Checkbox
        id="label5"
        checked={"label5" === isChecked}
        children="label5"
        onChange={handleOnChange}
      />
      <Checkbox
        id="label6"
        checked={"label6" === isChecked}
        children="label6"
        onChange={handleOnChange}
      />
    </FormMultipleInput>
  );
};

Checkbox_FormInput_Default.args = {
  label: "checkbox",
  children: [<div />],
  hintMessage: "hintmessage",
};
