import React, { useState } from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";

import { Input } from "../ui-components/Input";
import { InputNumber } from "../ui-components/Input/InputNumber";
import { InputInfo } from "../ui-components/Input/InputInfo";
import { OpenText } from "../ui-components/Input/OpenText";
import search from "../ui-components/Input/assets/search.svg";

export default {
  title: "Form Fields/Input",
  component: Input,
} as ComponentMeta<typeof Input>;

// Input Details Page
const InfoTemplate: ComponentStory<typeof Input> = (args) => (
  <>
    <InputInfo />
  </>
);

export const InputDetails = InfoTemplate.bind({});

// Input Components

const Template: ComponentStory<typeof Input> = (args) => {
  const [value, setValue] = useState("");

  return <Input {...args} value={value} onChange={(e) => setValue(e.target.value)} />;
};

export const SmallInput = Template.bind({});
SmallInput.args = {
  placeholder: "State",
  width: "small",
  labelText: "State",
  labelSize: "small",
};

export const MediumInput = Template.bind({});
MediumInput.args = {
  placeholder: "Enter your email",
  width: "medium",
  labelText: "Email",
};

export const LargeInput = Template.bind({});
LargeInput.args = {
  placeholder: "Confirm your password",
  width: "large",
  labelText: "Password",
};

export const XLInput = Template.bind({});
XLInput.args = {
  placeholder: "Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam",
  width: "xl",
  labelText: "Lorem ipsum dolor",
};

export const ErrorStateInput = Template.bind({});
ErrorStateInput.args = {
  placeholder: "Enter your email",
  width: "medium",
  status: "error",
  errorText: "Please enter your email address.",
  labelText: "Email",
};

// Open Text Input
const OpenTextTemplate: ComponentStory<typeof OpenText> = (args) => {
  const [value, setValue] = useState("");

  return <OpenText {...args} value={value} onChange={(e) => setValue(e.target.value)} />;
};

export const OpenTextInput = OpenTextTemplate.bind({});
OpenTextInput.args = {
  placeholder:
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, ",
  width: "large",
  labelText: "Label",
  labelSize: "small",
};

export const DisabledInput = Template.bind({});
DisabledInput.args = {
  placeholder: "Enter your email",
  disabled: true,
  width: "medium",
  labelText: "Email",
};

// Number Inputs
const NumberTemplate: ComponentStory<typeof InputNumber> = (args) => {
  const [value, setValue] = useState("");

  return (
    <InputNumber
      {...args}
      value={value}
      onChange={(e) => setValue(e as string)}
      onStep={(e) => setValue(e as string)}
    />
  );
};

export const NumberInputMaxLength = NumberTemplate.bind({});
NumberInputMaxLength.args = {
  placeholder: "Zipcode",
  maxLength: 5,
  controls: false,
  width: "small",
  labelText: "Zipcode",
  labelSize: "small",
};

export const NumberInputError = NumberTemplate.bind({});
NumberInputError.args = {
  placeholder: "Zipcode",
  controls: false,
  width: "small",
  labelText: "Zipcode",
  status: "error",
  errorText: "Please enter your zipcode.",
};

export const NumberInputControlsEnabled = NumberTemplate.bind({});
NumberInputControlsEnabled.args = {
  placeholder: "Enter years of practice",
  maxLength: 2,
  min: 0,
  max: 99,
  step: 1,
  controls: true,
  width: "medium",
  labelText: "Years of Practice",
};

export const DisabledNumberInput = NumberTemplate.bind({});
DisabledNumberInput.args = {
  placeholder: "Enter your zipcode",
  disabled: true,
  labelText: "Zipcode",
};

export const ActiveSearchInput = Template.bind({});
ActiveSearchInput.args = {
  placeholder: "Enter a term",
  labelText: "Search",
  width: "medium",
  suffix: <img src={search} />,
};
