import { Story, Meta } from "@storybook/react";

import Input from "./Input";
import Block from "../Block/Block";

export default {
  title: "Component/Atoms/Input",
  component: Input,
  parameters: {
    component: Input,
    previewTabs: {
      canvas: {
        hidden: true,
      },
    },
    viewMode: "docs",
  },
} as Meta;

interface ExampleProps {
  children?: React.ReactNode;
  classes: string;
}

const Template: Story = (args) => (
  <Input placeholder="Search ..." {...args}></Input>
);

const Example: Story<ExampleProps> = (args) => {
  const classes = args.classes;
  return classes ? (
    <Block className={args.classes}>{args.children}</Block>
  ) : (
    <>{args.children}</>
  );
};

export const Properties = Template.bind({});
Properties.args = {};

export const Types = Example.bind({});
Types.args = {
  children: (
    <>
      <Block className="flex flex-col w-full p-12 space-y-6 bg-gray-200">
        <Input placeholder="Initial ..." />
        <Input placeholder="Default ..." variation="default" />
        <Input placeholder="Primary ..." variation="primary" />
        <Input placeholder="Secondary ..." variation="secondary" />
      </Block>
      <Block className="flex flex-col w-full p-24 space-y-6 bg-gray-800">
        <Input placeholder="Initial ..." />
        <Input placeholder="Default ..." variation="default" />
        <Input placeholder="Primary ..." variation="primary" />
        <Input placeholder="Secondary ..." variation="secondary" />
      </Block>
    </>
  ),
  classes: "flex justify-center items-center w-full flex-col",
};

export const ErrorStates = Example.bind({});
ErrorStates.args = {
  children: (
    <>
      <Input
        placeholder="Error"
        className="placeholder-red-600 border-red-600"
      ></Input>
      <Input
        placeholder="Warning"
        className="placeholder-orange-600 border-orange-600"
      ></Input>
      <Input
        placeholder="Success"
        className="placeholder-green-600 border-green-600"
      ></Input>
      <Input
        placeholder="Info"
        className="placeholder-blue-600 border-blue-600"
      ></Input>

      <Input
        variation="primary"
        placeholder="Error"
        className="bg-red-600 border-red-600"
      ></Input>
      <Input
        variation="primary"
        placeholder="Warning"
        className="bg-orange-600 border-orange-600"
      ></Input>
      <Input
        variation="primary"
        placeholder="Success"
        className="bg-green-600 border-green-600"
      ></Input>
      <Input
        variation="primary"
        placeholder="Info"
        className="bg-blue-600 border-blue-600"
      ></Input>
    </>
  ),
  classes: "flex justify-center items-center w-full flex-col space-y-6 p-12",
};

export const InputTypeNumber = Example.bind({});
InputTypeNumber.args = {
  children: <Input type="number" step={0.1}></Input>,
};
