import { ComponentMeta, ComponentStory } from "@storybook/react";
import { ReactComponent as Dot } from "../Assets/Dot.svg";
import { ReactComponent as Downicon } from "../Assets/Caret-Down.svg";
import { ReactComponent as Closeicon } from "../Assets/close.svg";
import {
  Input,
  Textarea,
  Select,
  Col,
  Row,
  Form,
  FormItem,
  Dropdown,
  Menu,
} from "../Starship";
import LabeledIcon from "../Components/LabeledIcon/LabeledIcon";
import React from "react";
import "../Styles/index.scss";

// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
  title: "Example/Input",
  component: Input,

  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
} as ComponentMeta<typeof Input>;

// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args

const Template: ComponentStory<typeof Input> = (args) => {
  return (
    <>
      {/* primary button only text */}

      <Row
        gutter={[16, 16]}
        style={{ padding: "16px" }}
        justify={"center"}
        align={"middle"}
      >
        <Col span={24}>
          <Input {...args} title={"Input"} placeholder="input password" />
        </Col>
        <Col span={24}>
          <Input
            {...args}
            title={"Input"}
            placeholder="input password"
            suffix={"test"}
          />
        </Col>
        <Col span={24}>
          <Form layout="vertical">
            <FormItem
              className="starship-input-field"
              label={
                <Row justify="space-between" gutter={[0, 0]}>
                  <Col>Hi</Col>
                  <Col>Hi</Col>
                </Row>
              }
            >
              <Input
                {...args}
                title={"Input"}
                placeholder="input password"
                prefix="Hello1"
                suffix={<></>}
              />
            </FormItem>
            <FormItem
              className="starship-input-field"
              label={
                <Row justify="space-between">
                  <Col>Balance</Col>
                  <Col className="branding">Set Max</Col>
                </Row>
              }
            >
              <Input
                {...args}
                title={"Input"}
                placeholder="Label"
                prefix=""
                suffix={
                  <LabeledIcon
                    Icon={<Dot />}
                    rightText={"DOT"}
                    leftText={"Amount"}
                  />
                }
              />
            </FormItem>

            <FormItem
              className="starship-input-field"
              label={
                <Row justify="space-between">
                  <Col>Balance</Col>
                  <Col className="branding">Set Max</Col>
                </Row>
              }
            >
              <Input
                {...args}
                title={"Input"}
                placeholder="Label"
                prefix=""
                suffix={
                  <LabeledIcon
                    Icon={<Dot />}
                    rightText={"DOTasd asd asd asd "}
                  />
                }
              />
            </FormItem>
            <FormItem className="" name="gender" label="Gender">
              <Col span={8}>
                <Select
                  // open={true}
                  placeholder="Select a option and change input text above"
                  allowClear
                  suffixIcon={<Downicon />}
                  clearIcon={<Closeicon />}
                  options={[
                    { label: "female", value: "female" },
                    { label: "male", value: "male" },
                    {
                      label: "custom",
                      value: "custom",
                      icon: <Dot />,
                    },
                  ]}
                />
              </Col>
              <Select
                  style={{marginTop: "30px"}}
                  placeholder="Select a option and change input text above"
                  allowClear
                  suffixIcon={<Downicon />}
                  clearIcon={<Closeicon />}
                  options={[
                    { label: "female", value: "female" },
                    { label: "male", value: "male" },
                    {
                      label: "custom",
                      value: "custom",
                      icon: <Dot />,
                    },
                  ]}
                />
            </FormItem>
          </Form>
        </Col>
        <Col span={24}>
          <FormItem
            className="starship-input-field"
            label={
              <Row justify="space-between" gutter={[0, 0]}>
                <Col>Hi</Col>
                <Col>Hi</Col>
              </Row>
            }
          >
            <Input
              {...args}
              title={"Input"}
              placeholder="input password"
              prefix="Hello1"
              suffix={<></>}
            />

            <Input
              {...args}
              title={"Input"}
              placeholder="input random"
              prefix="Hello1"
              suffix={<></>}
            />
          </FormItem>
        </Col>

        <Col span={24}>
          <FormItem
            className="starship-input-field"
            label={
              <Row justify="space-between" gutter={[0, 0]}>
                <Col>Hi</Col>
                <Col>Hi</Col>
              </Row>
            }
          >
            <Textarea rows={12} placeholder="this is textarea" />
          </FormItem>
        </Col>
      </Row>
      {/* primary button only text */}
    </>
  );
};

export const StarshipInput = Template.bind({});
// More on args: https://storybook.js.org/docs/react/writing-stories/args
StarshipInput.args = { title: "Starship Input" };