import { PoweroffOutlined } from "@ant-design/icons";
import { Col, Row, Space } from "antd";
import React from "react";
import { Button } from "../Starship";
import "../Styles/index.scss";
import { ReactComponent as Circle } from "../Assets/Circle.svg";
import { ReactComponent as Downn } from "../Assets/Down.svg";
import { ReactComponent as Plus } from "../Assets/Plus.svg";
import { ReactComponent as Minus } from "../Assets/Minus.svg";

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

const meta: Meta<typeof Button> = {
  title: "Example/Button",
  component: Button,
  argTypes: {
    styleType: {
      control: {
        type: "select",
      },
      options: [
        "positive",
        "negative",
        "neutral",
        "primary",
        "ghost",
        "badge",
        "tertiary",
        "secondary",
        "link",
      ],
    },
  },
};

export default meta;

type Story = StoryObj<typeof Button>;

// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
export const Template: Story = {
  render: (args) => (
    <>
      {/* primary button only text */}
      <h2 className="h3">Button</h2>
      <Row
        gutter={[16, 16]}
        style={{ padding: "16px" }}
        justify={"center"}
        align={"middle"}
      >
        <Col span={24}>
          <Space>
            <Row justify={"center"}>
              <Space>
                <Col>
                  <Button {...args} size="large">
                    <span>Button CTA</span>
                  </Button>
                </Col>

                <Col>
                  <label>Btn Large Without Icon</label>
                </Col>
              </Space>
            </Row>

            <Row justify={"center"}>
              <Space>
                <Col>
                  <Button {...args} size="middle">
                    Button CTA
                  </Button>
                </Col>

                <Col>
                  <label>Btn Medium Without Icon</label>
                </Col>
              </Space>
            </Row>

            <Row justify={"center"}>
              <Space>
                <Col>
                  <Button {...args} size="small">
                    Button CTA
                  </Button>
                </Col>

                <Col>
                  <label>Btn Small Without Icon</label>
                </Col>
              </Space>
            </Row>
          </Space>
        </Col>
        {/* primary buttons with icon */}
        <Col span={24}>
          <Space>
            <Button
              {...args}
              //icon={<PoweroffOutlined />}
              //loading={loadings[1]}
              // title="ABC"
              loading={false}
              onClick={() => {}}
              size="large"
              leftIcon={<Circle />}
              rightIcon={<Circle />}
              badge={"NEW"}
            >
              Button CTA
              <Downn className="downIcon" />
            </Button>
            <label>Btn Large With Icon</label>
            <Button
              {...args}
              //icon={<PoweroffOutlined />}
              //loading={loadings[1]}
              // title="ABC"
              loading={false}
              onClick={() => {}}
              size="middle"
            >
              ABC
              <PoweroffOutlined />
            </Button>
            <label>Btn Medium With Icon</label>
            <Button
              {...args}
              //icon={<PoweroffOutlined />}
              //loading={loadings[1]}
              // title="ABC"
              loading={false}
              onClick={() => {}}
              size="small"
            >
              ABC
              <PoweroffOutlined />
            </Button>
            <label>Btn Small With Icon</label>
          </Space>
        </Col>
        <Col span={24}>
          <Space>
            <Button {...args} onClick={() => {}} size="large">
              <PoweroffOutlined />
              Button CTA
            </Button>
            <label>Btn Large With Icon</label>
            <Button {...args} loading={false} onClick={() => {}} size="middle">
              <PoweroffOutlined />
              ABC
            </Button>
            <label>Btn Medium With Icon</label>
            <Button
              {...args}
              //icon={<PoweroffOutlined />}
              //loading={loadings[1]}
              // title="ABC"
              loading={false}
              onClick={() => {}}
              size="small"
            >
              <PoweroffOutlined />
              ABC
            </Button>
            <label>Btn Small With Icon</label>
          </Space>
        </Col>
        <Col span={24}>
          <Space>
            <Button
              {...args}
              icon={<PoweroffOutlined />}
              loading={false}
              onClick={() => {}}
              size="large"
            ></Button>
            <label>Btn Large With only Icon</label>
            <Button
              {...args}
              icon={<PoweroffOutlined />}
              //loading={loadings[1]}
              // title=""
              loading={false}
              onClick={() => {}}
              size="middle"
            ></Button>
            <label>Btn Medium With only Icon</label>
            <Button
              {...args}
              icon={<PoweroffOutlined />}
              //loading={loadings[1]}
              // title=""
              loading={false}
              onClick={() => {}}
              size="small"
            ></Button>
            <label>Btn Small With only Icon</label>
          </Space>
        </Col>
        <Col span={24}>
          <Space>
            <Button
              {...args}
              shape="round"
              icon={<PoweroffOutlined />}
              //loading={loadings[1]}
              // title="ABC"
              loading={false}
              onClick={() => {}}
              size="large"
            ></Button>
            <label>Rounded Btn Large With only Icon</label>
            <Button
              {...args}
              shape="round"
              icon={<PoweroffOutlined />}
              //loading={loadings[1]}
              // title=""
              loading={false}
              onClick={() => {}}
              size="middle"
            ></Button>
            <label>Rounded Btn Medium With only Icon</label>
            <Button
              {...args}
              shape="round"
              icon={<Plus />}
              //loading={loadings[1]}
              // title=""
              loading={false}
              onClick={() => {}}
              size="small"
            ></Button>
            <Button
              {...args}
              shape="round"
              icon={<Minus />}
              //loading={loadings[1]}
              // title=""
              loading={false}
              onClick={() => {}}
              size="small"
            ></Button>
            <label>Rounded Btn Small With only Icon</label>
          </Space>
        </Col>
        <Col span={24}>
          <Button
            {...args}
            style={{ width: "100%" }}
            //icon={<PoweroffOutlined />}
            //loading={loadings[1]}
            // title="ABC"
            loading={false}
            onClick={() => {}}
            size="large"
          >
            ABC
            <PoweroffOutlined />
          </Button>
        </Col>
        <Col span={24}>
          <Button
            {...args}
            style={{ width: "100%" }}
            //icon={<PoweroffOutlined />}
            //loading={loadings[1]}
            // title="ABC"
            disabled={true}
            loading={false}
            onClick={() => {}}
            size="large"
          >
            ABC
            <PoweroffOutlined />
          </Button>
        </Col>
        <Col span={24}>
          <Button
            {...args}
            style={{ width: "100%" }}
            //icon={<PoweroffOutlined />}
            //loading={loadings[1]}
            // title="ABC"
            loading={true}
            onClick={() => {}}
            size="large"
          >
            ABC
            <PoweroffOutlined />
          </Button>
        </Col>
      </Row>
      {/* primary button only text */}
    </>
  ),
};