import React from 'react';
import styled from 'styled-components';
import { Button } from '@lendi/ui/Button';
import { Spacer } from '@lendi/ui/Layout';
import { Text, P, A } from '@lendi/ui/Typography';
import Search from '@lendi-ui/icon/Search';
import Add from '@lendi-ui/icon/Add';

export const HorizontalSpacer = (args) => (
  <Spacer {...args}>
    <A href="#">A Link</A>
    <Button variant="secondary">A button</Button>
    <Button variant="primary">A button</Button>
    <Search height="20px" width="20px" />
    <Add height="20px" width="20px" />
  </Spacer>
);

HorizontalSpacer.args = {
  xgap: '24',
  xalign: 'center',
};

export const HorizontalYGap = (args) => (
  <Spacer {...args}>
    <A href="#">A Link</A>
    <Button variant="secondary">A button</Button>
    <Button variant="primary">A button</Button>
    <Search height="20px" width="20px" />
    <Add height="20px" width="20px" />
    <Button variant="primary">A button</Button>
    <Button variant="primary">A button</Button>
    <Button variant="primary">A button</Button>
  </Spacer>
);

HorizontalYGap.args = {
  xgap: '16',
  ygap: '40',
  xalign: 'center',
  width: '50%',
};

export const HorizontalWrapping = (args) => (
  <Spacer {...args}>
    <A href="#">A Link</A>
    <Button variant="secondary">A button</Button>
    <Button variant="primary">A button</Button>
    <Search height="20px" width="20px" />
    <Add height="20px" width="20px" />
    <Button variant="primary">A button</Button>
    <Button variant="primary">A button</Button>
    <Button variant="primary">A button</Button>
  </Spacer>
);

HorizontalWrapping.args = {
  xgap: '16',
  shouldWrap: true,
  xalign: 'center',
  width: '50%',
};

export const VerticalSpacer = (args) => (
  <Spacer {...args}>
    <Text variant="title1" tag="h3">
      A heading
    </Text>
    <Text variant="subtitle1" tag="h4">
      A subheading
    </Text>
    <P>Some text in a spacer with a sm gap</P>
    <P>Some more text in a spacer with a sm gap</P>
    <img src="https://picsum.photos/id/1018/100/100" width="100" height="100" />
    <Button variant="primary">A button</Button>
  </Spacer>
);

VerticalSpacer.args = { ygap: '16' };

export const VerticalSpacerNested = (args) => (
  <Spacer {...args}>
    <Text variant="title1" tag="h3">
      A heading
    </Text>
    <Text variant="subtitle1" tag="h4">
      A subheading
    </Text>
    <P>Some text in a spacer with a sm gap</P>
    <P>Some more text in a spacer with a sm gap</P>
    <img src="https://picsum.photos/id/1003/100/100" width="100" height="100" />
    <hr />
    <Spacer ygap="lg" start="xl" end="xl" yalign="center" width="100%">
      <Text variant="title2" tag="h3">
        A nested spacer
      </Text>
      <hr />
      <P>A nested spacer with a lg gap, xl at the start and end, centered on y axis, and set to full width (100%)</P>
      <Button variant="primary">A button</Button>
      <P>A nested horizontal spacer:</P>
      <Spacer xgap="md">
        <Button variant="secondary">A button</Button>
        <Button variant="primary">A button</Button>
      </Spacer>
    </Spacer>
    <P>Back to sm gap</P>
    <Button variant="primary">A button</Button>
    <Button variant="primary" width="100%">
      A button with width 100%
    </Button>
  </Spacer>
);

VerticalSpacerNested.args = {
  ygap: '16',
};

const Tile = styled.div`
  width: 20%;
  height: 100px;
  background-color: red;
`;
Tile.displayName = 'Tile';

const Tile2 = styled.div`
  width: 100px;
  height: 100px;
  background-color: red;
`;
Tile2.displayName = 'Tile2';

export const TileSpacer = (args) => (
  <Spacer {...args}>
    <Tile />
    <Tile />
    <Tile />
    <Tile2 />
    <Tile2 />
    <Tile2 />
    <Tile2 />
    <Tile2 />
    <Tile2 />
  </Spacer>
);

TileSpacer.args = {
  gap: '24',
  align: 'center',
};