import {PoweroffOutlined} from "@ant-design/icons";
import {ComponentMeta, ComponentStory} from "@storybook/react";
import {Col, Row, Space} from "antd";
import React from "react";
import {Button} from "../Starship";
import "../Styles/index.scss";

// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
    title: "Example/Button",
    component: Button,
    argTypes: {
        styleType: {
            control: {
                type: "select",
                options: [
                    "confirmative",
                    "destructive",
                    "dark",
                    "primary",
                    "link-dark",
                    "badge",
                    "tertiary",
                    "link",
                ],
            },
        },
    },
    // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
} as ComponentMeta<typeof Button>;

// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
const Template: ComponentStory<typeof Button> = 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"
                    >
                        Button CTA
                        <PoweroffOutlined />
                    </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>
                </Space>
            </Col>
            <Col span={24}>
                <Space>
                    <Button
                        {...args}
                        //icon={<PoweroffOutlined />}
                        //loading={loadings[1]}
                        // title="ABC"
                        loading={false}
                        onClick={() => {}}
                        size="large"
                    >
                        <PoweroffOutlined />
                        Button CTA
                    </Button>
                    <label>Btn Large With Icon</label>
                    <Button
                        {...args}
                        //icon={<PoweroffOutlined />}
                        //loading={loadings[1]}
                        // title="ABC"
                        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>
                </Space>
            </Col>
            <Col span={24}>
                <Space>
                    <Button
                        {...args}
                        shape="round"
                        icon={<PoweroffOutlined />}
                        //loading={loadings[1]}
                        // title="ABC"
                        loading={false}
                        onClick={() => {}}
                        size="large"
                    ></Button>
                    <label>Btn Large With only Icon</label>
                    <Button
                        {...args}
                        shape="round"
                        icon={<PoweroffOutlined />}
                        //loading={loadings[1]}
                        // title=""
                        loading={false}
                        onClick={() => {}}
                        size="middle"
                    ></Button>
                    <label>Btn Medium With only Icon</label>
                    <Button
                        {...args}
                        shape="round"
                        icon={<PoweroffOutlined />}
                        //loading={loadings[1]}
                        // title=""
                        loading={false}
                        onClick={() => {}}
                        size="small"
                    ></Button>
                    <label>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 */}
    </>
);

export const StarshipButton = Template.bind({});
// More on args: https://storybook.js.org/docs/react/writing-stories/args
StarshipButton.args = {
    styleType: "primary",
};