// node modules
import React, { useState } from "react";
import { Meta, Story } from "@storybook/react";
import { createUseStyles } from "react-jss";

// local components
import { SimpleButton, SimpleButtonProps } from "../components/buttons/simple_button";
import { PrimaryButton, PrimaryButtonProps } from "../components/buttons/primary_button";
import { SelectButton, SelectButtonProps } from "../components/buttons/select_button";
import { CheckButton, CheckButtonProps } from "../components/buttons/check_button";
import { CheckButtonPrimary, CheckButtonPrimaryProps } from "../components/buttons/check_button_primary";

export default {
    title: 'Example/Buttons',
    argTypes: {
        textTransform: {
            control: {
                type: 'select',
                options: ['none', 'capitalize','uppercase', 'lowercase']
            }
        }
    }
} as Meta;

const SimpleButtonTpl: Story<SimpleButtonProps> = (args) => <SimpleButton {...args} />;

export const simple_btn = SimpleButtonTpl.bind({});

simple_btn.args = {
    label: 'Simple Button',
    loading: false
}

const PrimaryButtonTpl: Story<PrimaryButtonProps> = (args) => <PrimaryButton {...args} />;

export const primary_btn = PrimaryButtonTpl.bind({});

primary_btn.args = {
    label: 'Primary Button',
    loading: false,
    disabled: false,
    onClick: () => {
        console.log('hi');
    }
}

const SelectButtonTpl: Story<SelectButtonProps> = (args) => {
    const { btn } = createUseStyles({ btn: { marginBottom: 10 } })()
    const [selectedBtns, setSelectedBtns] = useState({
        0: false,
        1: true,
        2: false
    });

    return (
        <>
            <SelectButton
                onClick={() => {setSelectedBtns({ 0: true, 1: false, 2: false })}}
                {...args}
                selected={selectedBtns[0]}
                className={btn}
            />
            <br/>
            <SelectButton
                onClick={() => setSelectedBtns({ 0: false, 1: true, 2: false })}
                {...args}
                selected={selectedBtns[1]}
                className={btn}
            />
            <br/>
            <SelectButton
                onClick={() => setSelectedBtns({ 0: false, 1: false, 2: true })}
                {...args}
                selected={selectedBtns[2]}
                className={btn}
            />
        </>
    );
};

export const select_btn = SelectButtonTpl.bind({});

select_btn.args = {
    label: 'Select Button',
    selected: false,
    loading: false,
    disabled: false,
    multiClickProtectorDelay: 2000,
}

const CheckButtonTpl: Story<CheckButtonProps> = (args) => <CheckButton {...args} />;

export const check_btn = CheckButtonTpl.bind({});

check_btn.args = {
    label: 'Check Button',
    selected: true,
    loading: false,
    disabled: false
}

const CheckButtonPrimaryTpl: Story<CheckButtonPrimaryProps> = (args) => <CheckButtonPrimary {...args} />;

export const check_btn_primary = CheckButtonPrimaryTpl.bind({});

check_btn_primary.args = {
    label: 'Primary Check Button',
    selected: true,
    disabled: false,
    iconColor: 'white'
}