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

import InputText, { InputTextProps } from "./InputText";
import Block from "../../atoms/Block/Block";
import Button from "../../atoms/Button/Button";

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

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

const Template: Story<InputTextProps> = (args) => (
  <InputText {...args}></InputText>
);

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 Usage = Example.bind({});
Usage.args = {
  children: (
    <InputText
      placeholder="Search ..."
      label="Hello this is a input text"
      message="State message"
    ></InputText>
  ),
};

export const WithButton = Example.bind({});
WithButton.args = {
  children: (
    <InputText
      placeholder="Search ..."
      label="Hello this is a input text"
      message="State message"
    >
      <Button variation="primary">Submit</Button>
    </InputText>
  ),
};

export const Variations = Example.bind({});
Variations.args = {
  children: (
    <Block className="space-y-6">
      <InputText
        placeholder="Search ..."
        label="Hello this is a input text"
        message="State message"
      >
        <Button>Submit</Button>
      </InputText>
      <InputText
        variation="default"
        placeholder="Search ..."
        label="Hello this is a input text"
        message="State message"
      >
        <Button variation="default">Submit</Button>
      </InputText>
      <InputText
        variation="primary"
        placeholder="Search ..."
        label="Hello this is a input text"
        message="State message"
      >
        <Button variation="primary">Submit</Button>
      </InputText>
      <InputText
        variation="secondary"
        placeholder="Search ..."
        label="Hello this is a input text"
        message="State message"
      >
        <Button variation="secondary">Submit</Button>
      </InputText>
    </Block>
  ),
};
