import React from 'react';
import styled from 'styled-components';
import { Button, AnchorButton } from './index';
import { Spacer } from '@lendi/ui/Layout';
import Add from '@lendi-ui/icon/Add';
import ArrowForward from '@lendi-ui/icon/ArrowForward';
import ArrowBack from '@lendi-ui/icon/ArrowBack';
import Close from '@lendi-ui/icon/Close';
import { Spacing } from '../../tokens';

export const Interactive = (args) => (
  <Spacer xgap="sm">
    <Button {...args}>Button</Button>
    <Button {...args} icon={{ component: Add, position: 'end' }}>
      Button & icon
    </Button>
  </Spacer>
);

export const ColouredDiv = styled.div`
  background-color: ${({ theme }) => theme.color.fill.contrast};
  padding: ${Spacing.sm};
`;

const actionButtonArgs = {
  onClick: (e) => console.log('click', e),
  variant: 'primary',
};

Interactive.args = {
  ...actionButtonArgs,
};

export const Variants = (args) => (
  <Spacer xgap="sm">
    <Button {...args}>Primary Button</Button>
    <Button {...args} variant="secondary">
      Secondary Button
    </Button>
    <Button {...args} variant="text">
      Text Button
    </Button>
  </Spacer>
);

Variants.args = {
  ...actionButtonArgs,
};

export const States = (args) => (
  <>
    <div style={{ marginBottom: '1.5rem', display: 'flex', gap: '1.5rem', flexWrap: 'wrap' }}>
      <Button {...args}>Default</Button>
      <Button {...args} id={'hover'}>
        Hover
      </Button>
      <Button {...args} id={'active'}>
        Active
      </Button>
      <Button {...args} id={'focus-visible'}>
        Focus Visible
      </Button>
      <Button {...args} id={'disabled'} isDisabled>
        Disabled
      </Button>
      <Button {...args} isLoading>
        Loading
      </Button>
    </div>
    <div style={{ marginBottom: '1.5rem', display: 'flex', gap: '1.5rem', flexWrap: 'wrap' }}>
      <Button {...args} variant="secondary">
        Default
      </Button>
      <Button {...args} variant="secondary" id={'hover2'}>
        Hover
      </Button>
      <Button {...args} variant="secondary" id={'active2'}>
        Active
      </Button>
      <Button {...args} variant="secondary" id={'focus-visible2'}>
        Focus Visible
      </Button>
      <Button {...args} variant="secondary" id={'disabled2'} isDisabled>
        Disabled
      </Button>
      <Button {...args} variant="secondary" isLoading>
        Loading
      </Button>
    </div>
    <div style={{ marginBottom: '1.5rem', display: 'flex', gap: '1.5rem', flexWrap: 'wrap' }}>
      <Button {...args} variant="text">
        Default
      </Button>
      <Button {...args} variant="text" id={'hover3'}>
        Hover
      </Button>
      <Button {...args} variant="text" id={'active3'}>
        Active
      </Button>
      <Button {...args} variant="text" id={'focus-visible3'}>
        Focus Visible
      </Button>
      <Button {...args} variant="text" id={'disabled3'} isDisabled>
        Disabled
      </Button>
      <Button {...args} variant="text" isLoading>
        Loading
      </Button>
    </div>

    <ColouredDiv>
      <div style={{ marginBottom: '1.5rem', display: 'flex', gap: '1.5rem', flexWrap: 'wrap' }}>
        <Button {...args} isInverse>
          Default
        </Button>
        <Button {...args} isInverse id={'hover4'}>
          Hover
        </Button>
        <Button {...args} isInverse id={'active4'}>
          Active
        </Button>
        <Button {...args} isInverse id={'focus-visible4'}>
          Focus Visible
        </Button>
        <Button {...args} isInverse id={'disabled4'} isDisabled>
          Disabled
        </Button>
        <Button {...args} isInverse isLoading>
          Loading
        </Button>
      </div>
      <div style={{ marginBottom: '1.5rem', display: 'flex', gap: '1.5rem', flexWrap: 'wrap' }}>
        <Button {...args} isInverse variant="secondary">
          Default
        </Button>
        <Button {...args} isInverse variant="secondary" id={'hover5'}>
          Hover
        </Button>
        <Button {...args} isInverse variant="secondary" id={'active5'}>
          Active
        </Button>
        <Button {...args} isInverse variant="secondary" id={'focus-visible5'}>
          Focus Visible
        </Button>
        <Button {...args} isInverse variant="secondary" id={'disabled5'} isDisabled>
          Disabled
        </Button>
        <Button {...args} isInverse variant="secondary" isLoading>
          Loading
        </Button>
      </div>
      <div style={{ display: 'flex', gap: '1.5rem', flexWrap: 'wrap' }}>
        <Button {...args} isInverse variant="text">
          Default
        </Button>
        <Button {...args} isInverse variant="text" id={'hover6'}>
          Hover
        </Button>
        <Button {...args} isInverse variant="text" id={'active6'}>
          Active
        </Button>
        <Button {...args} isInverse variant="text" id={'focus-visible6'}>
          Focus Visible
        </Button>
        <Button {...args} isInverse variant="text" id={'disabled6'} isDisabled>
          Disabled
        </Button>
        <Button {...args} isInverse variant="text" isLoading>
          Loading
        </Button>
      </div>
    </ColouredDiv>
  </>
);

States.args = {
  ...actionButtonArgs,
};
States.parameters = {
  pseudo: {
    hover: ['#hover', '#hover2', '#hover3', '#hover4', '#hover5', '#hover6'],
    active: ['#active', '#active2', '#active3', '#active4', '#active5', '#active6'],
    focusVisible: [
      '#focus-visible',
      '#focus-visible2',
      '#focus-visible3',
      '#focus-visible4',
      '#focus-visible5',
      '#focus-visible6',
    ],
  },
  attributes: {
    disabled: ['#disabled', '#disabled2', '#disabled3', '#disabled4', '#disabled5', '#disabled6'],
  },
};

export const Inverse = (args) => {
  return (
    <ColouredDiv>
      <Spacer xgap="sm">
        <Button {...args} isInverse>
          Inverse primary
        </Button>
        <Button {...args} variant="secondary" isInverse>
          Inverse secondary
        </Button>
        <Button {...args} variant="text" isInverse>
          Inverse text
        </Button>
      </Spacer>
    </ColouredDiv>
  );
};

Inverse.args = {
  ...actionButtonArgs,
};

export const ButtonTypes = (args) => (
  <Spacer xgap="sm">
    <Button {...args} type="button">
      Button Button
    </Button>
    <Button {...args} type="submit" variant="secondary">
      Submit Button
    </Button>
    <Button {...args} type="reset" variant="text">
      Reset Button
    </Button>
  </Spacer>
);

ButtonTypes.args = {
  ...actionButtonArgs,
};

ButtonTypes.parameters = { docs: { disable: true } };

export const Icons = (args) => (
  <Spacer>
    <Button {...args} size="xs">
      Add another
    </Button>
    <Button {...args} size="sm">
      Add another
    </Button>
    <Button {...args} size="md">
      Add another
    </Button>
    <Button {...args} size="lg">
      Add another
    </Button>
  </Spacer>
);

Icons.args = {
  ...actionButtonArgs,
  icon: { component: Add, position: 'end' },
};

export const IconPosition = (args) => (
  <Spacer ygap="md">
    <Spacer>
      <Button {...args} icon={{ component: Close, position: 'start' }}>
        Cancel
      </Button>
      <Button {...args} icon={{ component: Add, position: 'end' }}>
        Add another
      </Button>
    </Spacer>
    <Spacer>
      <AnchorButton variant="secondary" href="/" icon={{ component: ArrowBack, position: 'start' }}>
        Previous page
      </AnchorButton>
      <AnchorButton variant="secondary" href="/" icon={{ component: ArrowForward, position: 'end' }}>
        Next page
      </AnchorButton>
    </Spacer>
  </Spacer>
);

IconPosition.args = {
  ...actionButtonArgs,
};

export const IconOnly = () => (
  <Button variant="primary" ariaLabel="Add another income type" icon={{ component: Add }} />
);

IconOnly.args = {
  ...actionButtonArgs,
};

export const ButtonSizes = (args) => (
  <Spacer ygap="32">
    <Spacer xgap="sm">
      <Button {...args} size="xs">
        Size xs
      </Button>
      <Button {...args} size="sm">
        Size sm
      </Button>
      <Button {...args} size="md">
        Size md
      </Button>
      <Button {...args} size="lg">
        Size lg
      </Button>
    </Spacer>
    <Spacer xgap="sm">
      <Button {...args} size="xs" icon={{ component: Add, position: 'end' }}>
        Xs with icon
      </Button>
      <Button {...args} size="sm" icon={{ component: Add, position: 'end' }}>
        Sm with icon
      </Button>
      <Button {...args} size="md" icon={{ component: Add, position: 'end' }}>
        Md with icon
      </Button>
      <Button {...args} size="lg" icon={{ component: Add, position: 'end' }}>
        Lg with icon
      </Button>
    </Spacer>
  </Spacer>
);

ButtonSizes.args = { ...actionButtonArgs };

export const ButtonWidth = (args) => (
  <Spacer ygap="sm">
    <Button {...args}>width: auto</Button>
    <Button {...args} width="100%">
      width: 100%
    </Button>
    <Button {...args} width="200px">
      width: 200px
    </Button>
    <Button {...args} width="18.75rem">
      width: 18.75rem
    </Button>
    <Button {...args} width="50%">
      width: 50%
    </Button>
    <Button {...args} width="75%">
      width: 75%
    </Button>
  </Spacer>
);

ButtonWidth.args = { ...actionButtonArgs };

export const TextOverflow = (args) => (
  <Spacer xgap="sm">
    <Button {...args}>A Button with a hecking lot of text whoooowhee</Button>
    <Button {...args} icon={{ component: Add, position: 'start' }}>
      A Button with a hecking lot of text whoooowhee
    </Button>
    <Button {...args} minWidth="250px" maxWidth="400px">
      A Button with a hecking lot of text whoooowhee
    </Button>
  </Spacer>
);

TextOverflow.args = { ...actionButtonArgs, maxWidth: '200px' };
TextOverflow.parameters = { docs: { disable: true } };

const ThemedBackgroundDiv = styled.div`
  ${({ theme }) => `background-color: ${theme.color.fill.contrast}`};
  padding: 1rem;
  padding-left: 0;
  color: white;
`;

const Matrix = (args) => {
  const sizes = ['xs', 'sm', 'md', 'lg'];
  const variants = ['primary', 'secondary', 'text'] as const;

  return (
    <>
      <Spacer ygap="md">
        {sizes.map((size, i) =>
          variants.map((variant, i) => (
            <Spacer ygap="sm" key={`${size}-${variant}-${i}`}>
              <Spacer xgap="sm" xalign="center" start="xs">
                <p className="variant" style={{ minWidth: '12.5rem' }}>
                  {variant} - {size}
                </p>
                <Button size={size} variant={variant}>
                  Button
                </Button>
                <Button size={size} variant={variant} isDisabled>
                  Button
                </Button>
                <Button size={size} variant={variant} isLoading>
                  Button
                </Button>
              </Spacer>
            </Spacer>
          ))
        )}
        <ThemedBackgroundDiv>
          <Spacer ygap="md">
            {sizes.map((size, i) =>
              variants.map((variant, i) => (
                <Spacer xgap="sm" xalign="center" start="xs" key={`${size}-${variant}-${i}`}>
                  <p className="variant" style={{ minWidth: '12.5rem' }}>
                    {variant} inverse - {size}
                  </p>
                  <Button size={size} variant={variant} isInverse>
                    Button
                  </Button>
                  <Button size={size} variant={variant} isInverse isDisabled>
                    Button
                  </Button>
                  <Button size={size} variant={variant} isInverse isLoading>
                    Button
                  </Button>
                </Spacer>
              ))
            )}
          </Spacer>
        </ThemedBackgroundDiv>
      </Spacer>
    </>
  );
};

export const MatrixStory = (args) => <Matrix />;
MatrixStory.parameters = { docs: { disable: true } };

export const AnchorButtonDefault = () => (
  <Spacer xgap="sm">
    <AnchorButton variant="primary" href="https://lendi.com.au">
      Anchor link looks like a Button
    </AnchorButton>
    <AnchorButton variant="primary" href="https://lendi.com.au" icon={{ component: ArrowForward, position: 'end' }}>
      Anchor link with icon
    </AnchorButton>
  </Spacer>
);

AnchorButtonDefault.parameters = {
  layout: 'centered',
  controls: { exclude: ['type', 'onPress', 'onClick', 'isDisabled', 'isLoading'] },
};

export const AnchorButtonOpenNewTab = () => (
  <AnchorButton variant="text" href="https://lendi.com.au" target="_blank">
    Anchor link (opens in new tab)
  </AnchorButton>
);