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

export default {
    title: 'Inputs/RoundButton',
    component: RoundButton,
    parameters: {
        layout: 'centered'
    },
    argTypes: {
        onClick: { control: false },
        onMouseUp: { control: false },
        onMouseDown: { control: false }
    },
    args: {
        type: 'button'
    }
} as ComponentMeta<typeof RoundButton>;

export const WithText: ComponentStory<typeof RoundButton> = (args) => (
    <RoundButton {...args}>
        HA
    </RoundButton>
);

export const WithIcon: ComponentStory<typeof RoundButton> = (args) => (
    <RoundButton {...args} icon="ghost" />
);

export const Disabled: ComponentStory<typeof RoundButton> = (args) => (
    <RoundButton {...args}>
        +
    </RoundButton>
);
Disabled.args = {
    disabled: true
}

export const Pulsing: ComponentStory<typeof RoundButton> = (args) => (
    <RoundButton {...args}>
        +
    </RoundButton>
);
Pulsing.args = {
    pulse: true
}

export const Flat: ComponentStory<typeof RoundButton> = (args) => (
    <RoundButton {...args} icon="ghost" />
);
Flat.args = {
    flat: true
}

export const Inverse: ComponentStory<typeof RoundButton> = (args) => (
    <RoundButton {...args} icon="ghost" />
);
Inverse.args = {
    inverse: true
}

export const Secondary: ComponentStory<typeof RoundButton> = (args) => (
    <RoundButton {...args} icon="ghost" />
);
Secondary.args = {
    secondary: true
}

export const SecondaryInverse: ComponentStory<typeof RoundButton> = (args) => (
    <RoundButton {...args} icon="ghost" />
);
SecondaryInverse.args = {
    secondary: true,
    inverse: true
}

export const LabelSelected: ComponentStory<typeof RoundButton> = (args) => (
    <RoundButton {...args} icon="ghost" />
);
LabelSelected.args = {
    labelState: 'selected'
}

export const LabelDeselected: ComponentStory<typeof RoundButton> = (args) => (
    <RoundButton {...args} icon="ghost" />
);
LabelDeselected.args = {
    labelState: 'deselected'
}

export const Tiny: ComponentStory<typeof RoundButton> = (args) => (
    <RoundButton {...args} icon="ghost" />
);
Tiny.args = {
    size: 'tiny'
}

export const Small: ComponentStory<typeof RoundButton> = (args) => (
    <RoundButton {...args} icon="ghost" />
);
Small.args = {
    size: 'small'
}

export const Regular: ComponentStory<typeof RoundButton> = (args) => (
    <RoundButton {...args} icon="ghost" />
);
Regular.args = {
    size: 'regular'
}

export const Large: ComponentStory<typeof RoundButton> = (args) => (
    <RoundButton {...args} icon="ghost" />
);
Large.args = {
    size: 'large'
}

export const Huge: ComponentStory<typeof RoundButton> = (args) => (
    <RoundButton {...args} icon="ghost" />
);
Huge.args = {
    size: 'huge'
}

export const StyleCustomized: ComponentStory<typeof RoundButton> = (args) => (
    <RoundButton {...args}>
        +
    </RoundButton>
);
StyleCustomized.args = {
    style: {
        width: 80,
        height: 80,
        fontSize: 40
    }
}