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

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

export default meta;

type Story = StoryObj<typeof meta>;

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

  const handleOnChange = (value: string) => {
    setInputValue(value);
  };

  return (
    <FormInput {...args}>
      <NumberInput
        value={inputValue}
        onChange={handleOnChange}
        unit="cm"
        placeholder="default"
      />
    </FormInput>
  );
};

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

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

  const handleOnChange = (value: string) => {
    setInputValue(value);
  };

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

  return (
    <FormInput {...args} onError={handleOnError}>
      <NumberInput
        value={inputValue}
        onChange={handleOnChange}
        onError={handleOnError}
        unit=""
        enableButton={true}
        placeholder="error"
      />
    </FormInput>
  );
};

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