import React from 'react';
import Button from './index';
import Icon from '../../Icon';
import taste from '../../../Presets/taste';
import { Provider } from '../../../DesignSystem';

export default {
  title: 'Core/Controls/Button',
  component: Button
};

const Template = args => <Button {...args}>{args?.children}</Button>;

const TasteTemplate = args => (
  <Provider theme={taste}>
    <Button {...args}>{args?.children}</Button>
  </Provider>
);

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Try for free',
  children: 'Try for free'
};

export const ActivePrimary = Template.bind({});
ActivePrimary.args = {
  size: 'medium',
  active: true,
  primary: true,
  label: 'Try for free',
  children: 'Try for free',
  iconRight: 'ArrowNext'
};

export const Secondary = Template.bind({});
Secondary.args = {
  secondary: true,
  label: 'Try for free',
  children: 'Try for free'
};

export const ActiveSecondary = Template.bind({});
ActiveSecondary.args = {
  size: 'medium',
  active: true,
  secondary: true,
  label: 'Try for free',
  children: 'Try for free',
  iconRight: 'ArrowNext'
};

export const Link = Template.bind({});
Link.args = {
  link: true,
  children: 'Link',
  icon: 'Link'
};

export const Taste = TasteTemplate.bind({});
Taste.args = {
  primary: true,
  label: 'Try for free',
  children: 'Try for free'
};

export const Loading = Template.bind({});
Loading.args = {
  size: 'medium',
  primary: true,
  loading: true,
  label: 'Try for free',
  children: 'Try for free',
  iconRight: 'ArrowNext'
};

export const Default = Template.bind({});
Default.args = {
  label: 'Try for free',
  children: 'Try for free'
};

export const Large = Template.bind({});
Large.args = {
  size: 'large',
  label: 'Try for free',
  children: 'Try for free'
};

export const Medium = Template.bind({});
Medium.args = {
  size: 'medium',
  label: 'Try for free',
  children: 'Try for free'
};

export const Small = Template.bind({});
Small.args = {
  size: 'small',
  label: 'Try for free',
  children: 'Try for free'
};

export const XSmall = Template.bind({});
XSmall.args = {
  size: 'xsmall',
  label: 'Try for free',
  children: 'Try for free'
};

export const FullWidth = Template.bind({});
FullWidth.args = {
  size: 'medium',
  primary: true,
  fullWidth: true,
  label: 'Try for free',
  children: 'Try for free'
};

export const Disable = Template.bind({});
Disable.args = {
  size: 'small',
  label: 'Try for free',
  children: 'Try for free',
  primary: true,
  disabled: true
};

export const IconLeft = Template.bind({});
IconLeft.args = {
  size: 'medium',
  primary: true,
  label: 'Try for free',
  children: 'Try for free',
  iconLeft: 'ArrowNext'
};

export const IconRight = Template.bind({});
IconRight.args = {
  size: 'medium',
  label: 'Try for free',
  children: 'Try for free',
  iconRight: 'ArrowNext'
};

export const IconChildren = Template.bind({});
IconChildren.args = {
  size: 'medium',
  label: 'Icon children',
  children: <Icon name="Mail" />
};

export const CustomHoverPrimary = Template.bind({});
CustomHoverPrimary.args = {
  primary: true,
  size: 'large',
  label: 'Custom hover primary large',
  children: 'What a day!',
  customBackgroundColorOnHover: 'red'
};

export const CustomHoverSecondary = Template.bind({});
CustomHoverSecondary.args = {
  secondary: true,
  size: 'large',
  label: 'Custom hover primary large',
  children: 'What a day!',
  customBackgroundColorOnHover: 'red'
};