import React from 'react';

import { ComponentStory, ComponentMeta } from '@storybook/react';

import { THEME } from '../../constants';
import { Button } from './Button';
import { BUTTON_SIZE, BUTTON_TYPE } from './types';

export default {
  title: 'ReactComponentLibrary/Button',
  component: Button,
  decorators: [
    (Story): JSX.Element => (
      <div className="centered-layout">
        <Story />
      </div>
    ),
  ],
} as ComponentMeta<typeof Button>;

const Template: ComponentStory<typeof Button> = (args) => <Button {...args}>Primary with text as a child</Button>;

export const LightPrimaryMediumWithCaption = Template.bind({});
LightPrimaryMediumWithCaption.args = {
  type: BUTTON_TYPE.primary,
  size: BUTTON_SIZE.medium,
  theme: THEME.light,
  caption: 'primary',
};

export const LightPrimaryMediumRoundWithIcon = Template.bind({});
LightPrimaryMediumRoundWithIcon.args = {
  type: BUTTON_TYPE.primary,
  size: BUTTON_SIZE.mediumRound,
  theme: THEME.light,
  icon: 'bookmark',
};

export const LightSecondaryMediumWithCaption = Template.bind({});
LightSecondaryMediumWithCaption.args = {
  type: BUTTON_TYPE.secondary,
  size: BUTTON_SIZE.medium,
  theme: THEME.light,
  caption: 'secondary',
};

export const LightSecondarySmallRoundWithIcon = Template.bind({});
LightSecondarySmallRoundWithIcon.args = {
  type: BUTTON_TYPE.secondary,
  size: BUTTON_SIZE.small,
  theme: THEME.light,
  icon: 'ellipsis',
};

export const LightTertiaryMediumWithCaption = Template.bind({});
LightTertiaryMediumWithCaption.args = {
  type: BUTTON_TYPE.tertiary,
  size: BUTTON_SIZE.medium,
  theme: THEME.light,
  caption: 'tertiary',
};

export const LightTertiarySmallWithCaption = Template.bind({});
LightTertiarySmallWithCaption.args = {
  type: BUTTON_TYPE.tertiary,
  size: BUTTON_SIZE.small,
  theme: THEME.light,
  caption: 'tertiary',
};

export const LightPrimaryMediumWithCaptionWithLoader = Template.bind({});
LightPrimaryMediumWithCaptionWithLoader.args = {
  type: BUTTON_TYPE.primary,
  size: BUTTON_SIZE.medium,
  theme: THEME.light,
  caption: 'primary',
  isLoading: true,
};

export const DarkPrimaryMediumWithCaption = Template.bind({});
DarkPrimaryMediumWithCaption.args = {
  type: BUTTON_TYPE.primary,
  size: BUTTON_SIZE.medium,
  theme: THEME.dark,
  caption: 'primary',
};
DarkPrimaryMediumWithCaption.parameters = {
  backgrounds: { default: 'dark' },
};

export const DarkPrimaryMediumRoundWithIcon = Template.bind({});
DarkPrimaryMediumRoundWithIcon.args = {
  type: BUTTON_TYPE.primary,
  size: BUTTON_SIZE.mediumRound,
  theme: THEME.dark,
  icon: 'bookmark',
};
DarkPrimaryMediumRoundWithIcon.parameters = {
  backgrounds: { default: 'dark' },
};

export const DarkSecondaryMediumWithCaption = Template.bind({});
DarkSecondaryMediumWithCaption.args = {
  type: BUTTON_TYPE.secondary,
  size: BUTTON_SIZE.medium,
  theme: THEME.dark,
  caption: 'secondary',
};
DarkSecondaryMediumWithCaption.parameters = {
  backgrounds: { default: 'dark' },
};

export const DarkSecondarySmallRoundWithIcon = Template.bind({});
DarkSecondarySmallRoundWithIcon.args = {
  type: BUTTON_TYPE.secondary,
  size: BUTTON_SIZE.small,
  theme: THEME.dark,
  icon: 'ellipsis',
};
DarkSecondarySmallRoundWithIcon.parameters = {
  backgrounds: { default: 'dark' },
};

export const DarkTertiaryMediumWithCaption = Template.bind({});
DarkTertiaryMediumWithCaption.args = {
  type: BUTTON_TYPE.tertiary,
  size: BUTTON_SIZE.medium,
  theme: THEME.dark,
  caption: 'tertiary',
};
DarkTertiaryMediumWithCaption.parameters = {
  backgrounds: { default: 'dark' },
};

export const DarkPrimaryMediumWithCaptionWithLoader = Template.bind({});
DarkPrimaryMediumWithCaptionWithLoader.args = {
  type: BUTTON_TYPE.primary,
  size: BUTTON_SIZE.medium,
  theme: THEME.dark,
  caption: 'primary',
  isLoading: true,
};
DarkPrimaryMediumWithCaptionWithLoader.parameters = {
  backgrounds: { default: 'dark' },
};