import { Global } from '@emotion/react';
import React from 'react';
import { config as designConfig, withDesign } from 'storybook-addon-designs';
import tw, { css, styled } from 'twin.macro';

import Button from '~/inputs/Button';
import { buttonColors, buttonSizes, buttonVariants } from '~/inputs/types';

export default {
  title: 'Inputs/Button',
  component: Button,
  args: {
    size: 'md',
    color: 'brand',
    variant: 'primary',
    children: 'Button',
    disabled: false,
  },
  argTypes: {
    variant: {
      control: {
        type: 'select',
        options: buttonVariants,
      },
    },
    color: {
      control: {
        type: 'select',
        options: buttonColors,
      },
    },
    size: {
      control: {
        type: 'select',
        options: buttonSizes,
      },
    },
  },
  decorators: [
    withDesign,
    (Story) => (
      <>
        <Global
          styles={css`
            button + button {
              ${tw`ml-2`}
            }
            .my-2 {
              ${tw`my-2`}
            }
          `}
        />
        {Story()}
      </>
    ),
  ],
  parameters: {
    design: designConfig({
      type: 'figma',
      url:
        'https://www.figma.com/file/77dkQryMN3UStlzTDFl5xd/Proper-2021-Sprints?node-id=2839%3A2724',
    }),
  },
};

const Template = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  variant: 'primary',
};

export const Secondary = Template.bind({});
Secondary.args = {
  variant: 'secondary',
};

export const Brand = Template.bind({});
Brand.args = { color: 'brand' };

export const Product = Template.bind({});
Product.args = { color: 'product' };

export const Plant = Template.bind({});
Plant.args = { color: 'plant' };

export const Large = Template.bind({});
Large.args = {
  size: 'md',
};

export const Small = Template.bind({});
Small.args = {
  size: 'sm',
};

export const AsLink = (props: { className?: string }) => (
  <Button as="a" href="/" title="as-link" variant="secondary" {...props}>
    As link
  </Button>
);

export const All = (props) => (
  <>
    <div className="my-2">
      <Button {...props} size="sm">
        Small
      </Button>
      <Button {...props} size="md">
        Medium (default)
      </Button>
    </div>
    <div className="my-2">
      <Button {...props} color="brand">
        Brand (default)
      </Button>
      <Button {...props} color="product">
        Product
      </Button>
      <Button {...props} color="plant">
        Plant
      </Button>
    </div>
    <div className="my-2">
      <Button {...props} variant="primary">
        Primary
      </Button>
      <Button {...props} variant="secondary">
        Secondary (default)
      </Button>
      <AsLink tw="pl-1.5" />
    </div>
  </>
);

const DIFFERENT_BACKGROUNDS = [
  styled.div(() => tw`p-4 bg-white ring-offset-white`),
  styled.div(() => tw`p-4 bg-black ring-offset-black`),
  styled.div(() => tw`p-4 bg-indigo-900 ring-offset-indigo-900`),
];
export const AgainstDifferentBackgrounds = (props) => (
  <>
    {DIFFERENT_BACKGROUNDS.map((Container, index) => (
      <Container key={index}>
        <Button {...props} />
      </Container>
    ))}
  </>
);