import React from 'react';
import {ComponentStory, ComponentMeta} from '@storybook/react';
import {RectButton} from '../src';

export default {
    title: 'Inputs/RectButton',
    component: RectButton,
    parameters: {
        layout: 'centered'
    }
} as ComponentMeta<typeof RectButton>;

export const Default: ComponentStory<typeof RectButton> = (args) => (
    <RectButton {...args}>
        Button
    </RectButton>
);
Default.args = {
    flat: false,
    inverse: false
}

export const WithIconOnly: ComponentStory<typeof RectButton> = (args) => (
    <RectButton {...args} />
);
WithIconOnly.args = {
    icon: 'ghost'
}

export const WithIconBehind: ComponentStory<typeof RectButton> = (args) => (
    <RectButton {...args}>
        Button
    </RectButton>
);
WithIconBehind.args = {
    icon: 'ghost',
    iconPlacement: 'right'
}

export const WithIconAhead: ComponentStory<typeof RectButton> = (args) => (
    <RectButton {...args}>
        Button
    </RectButton>
);
WithIconAhead.args = {
    icon: 'ghost',
    iconPlacement: 'left'
}

export const WithIconSmall: ComponentStory<typeof RectButton> = (args) => (
    <RectButton {...args} icon="ghost" iconSize="small">
        Button
    </RectButton>
);
WithIconSmall.args = {
    icon: 'ghost',
    iconSize: 'small'
}

export const Flat: ComponentStory<typeof RectButton> = (args) => (
    <RectButton {...args} icon="ghost">
        Button
    </RectButton>
);
Flat.args = {
    flat: true,
    inverse: false
}

export const Inverse: ComponentStory<typeof RectButton> = (args) => (
    <RectButton {...args} icon="ghost">
        Button
    </RectButton>
);
Inverse.args = {
    flat: false,
    inverse: true
}

export const Disabled: ComponentStory<typeof RectButton> = (args) => (
    <RectButton {...args} icon="ghost">
        Button
    </RectButton>
);
Disabled.args = {
    disabled: true
}

export const Loading: ComponentStory<typeof RectButton> = (args) => (
    <RectButton {...args} icon="ghost">
        Button
    </RectButton>
);
Loading.args = {
    loading: true,
    color: 'success'
}

export const LoadingOnClick: ComponentStory<typeof RectButton> = (args) => (
    <RectButton {...args} icon="ghost">
        Button
    </RectButton>
);
LoadingOnClick.args = {
    showLoadingOnClick: true,
    color: 'success',
    onClick: async () => {
        return new Promise(res => setTimeout(res, 2_000));
    }
}