/* eslint-disable react-hooks/rules-of-hooks */
import { select, boolean, text } from '@storybook/addon-knobs';
import { useState } from '@storybook/addons';
import React from 'react';
import Button from '.';
import { ButtonGroup, Stack, Shelf } from '../Layout/index';
import { IconNames } from '../Icon/IconMap';
import TextLink from '../TextLink';

export default {
  title: 'Components|Button',
  component: Button,
};

export const index = () => {
  const icon = select('Icon', [null, ...IconNames], 'clock');
  const iconRight = select('Icon Right', [null, ...IconNames], null);
  const active = boolean('Active');
  const disabled = boolean('Disabled');
  const loading = boolean('Loading');
  return (
    <Stack gap="medium">
      {['info', 'neutral', 'muted', 'positive', 'danger', 'inverted', 'chaser'].map((intent) => (
        <Shelf gap="large" flexWrap="nowrap" alignItems="flex-start" key={intent}>
          {['regular', 'narrow', 'micro'].map((size) => (
            <Stack key={size}>
              {['primary', 'secondary', 'minimal'].map((appearance) => (
                <ButtonGroup key={appearance}>
                  <Button
                    onClick={() => {}}
                    intent={intent}
                    icon={icon}
                    iconRight={iconRight}
                    size={size}
                    width="130px"
                    appearance={appearance}
                    active={active}
                    disabled={disabled}
                    loading={loading}
                  >
                    Button
                  </Button>
                  <Button
                    onClick={() => {}}
                    intent={intent}
                    size={size}
                    appearance={appearance}
                    active={active}
                    disabled={disabled}
                    loading={loading}
                  >
                    Button
                  </Button>
                  <Button
                    onClick={() => {}}
                    icon={icon || 'clock'}
                    size={size}
                    appearance={appearance}
                    intent={intent}
                    active={active}
                    disabled={disabled}
                    loading={loading}
                  />
                </ButtonGroup>
              ))}
            </Stack>
          ))}
        </Shelf>
      ))}
    </Stack>
  );
};

export const loadingStates = () => {
  const [state, setState] = useState('initial');
  const intent = select(
    'Intent',
    {
      info: 'info',
      neutral: 'neutral',
      positive: 'positive',
      danger: 'danger',
    },
    'info',
  );
  const size = select(
    'Size',
    {
      regular: 'regular',
      narrow: 'narrow',
      micro: 'micro',
    },
    'regular',
  );
  const resets = boolean('Resets on success', true);
  const message = text('SuccessMessage', 'Success');
  const successIcon = select('SuccessIcon', [null, ...IconNames], 'tick');

  return (
    <Stack>
      <Shelf>
        <span>State: </span>
        <TextLink onClick={() => setState('initial')}>Initial</TextLink>
        <TextLink onClick={() => setState('loading')}>Loading</TextLink>
        <TextLink onClick={() => setState('success')}>Success</TextLink>
      </Shelf>
      <Shelf>
        <Button
          loading={state === 'loading'}
          success={state === 'success'}
          intent={intent}
          size={size}
          onReset={resets ? () => setState('initial') : undefined}
          successMessage={message}
          successIcon={successIcon}
        >
          Primary
        </Button>
        <Button
          icon="clock"
          loading={state === 'loading'}
          success={state === 'success'}
          intent={intent}
          size={size}
          onReset={resets ? () => setState('initial') : undefined}
          successMessage={message}
          successIcon={successIcon}
        >
          Primary
        </Button>
        <Button
          loading={state === 'loading'}
          success={state === 'success'}
          intent={intent}
          size={size}
          onReset={resets ? () => setState('initial') : undefined}
          successMessage={message}
          appearance="secondary"
          successIcon={successIcon}
        >
          Secondary
        </Button>
        <Button
          icon="clock"
          loading={state === 'loading'}
          success={state === 'success'}
          intent={intent}
          size={size}
          onReset={resets ? () => setState('initial') : undefined}
          successMessage={message}
          appearance="secondary"
          successIcon={successIcon}
        />
        <Button
          loading={state === 'loading'}
          success={state === 'success'}
          intent={intent}
          size={size}
          onReset={resets ? () => setState('initial') : undefined}
          successMessage={message}
          appearance="minimal"
          successIcon={successIcon}
        >
          Minimal
        </Button>
      </Shelf>
    </Stack>
  );
};