import React from 'react';
import styled from 'styled-components';
import Spacer from './index';
import { DecorativePattern } from '../../../helpers';

export default {
  title: 'Core/Layout/Spacer',
  component: Spacer
};

const SpacerStory = styled(Spacer)`
  position: relative;

  &::after {
    content: attr(data-size);
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 11px;
    font-family: monospace;
    height: 20px;
    background-color: rgba(255, 0, 0, 0.1);
  }

  ${props =>
    props.small &&
    `
    &::after {
      height: 10px;
    }
  `};

  ${props =>
    props.medium &&
    `
    &::after {
      height: 30px;
    }
  `};

  ${props =>
    props.large &&
    `
    &::after {
      height: 40px;
    }
  `};

  ${props =>
    props.xlarge &&
    `
    &::after {
      height: 50px;
    }
  `};

  ${props =>
    props.xxlarge &&
    `
    &::after {
      height: 60px;
    }
  `};

  ${props =>
    props.xxxlarge &&
    `
    &::after {
      height: 80px;
    }
  `};
`;

const Template = args => (
  <>
    <h6>small</h6>
    <SpacerStory data-size={'10px'} small>
      <DecorativePattern />
    </SpacerStory>
    <h6>default (20px)</h6>
    <SpacerStory data-size={'20px'} {...args}>
      <DecorativePattern />
    </SpacerStory>
    <h6>medium</h6>
    <SpacerStory data-size={'30px'} medium>
      <DecorativePattern />
    </SpacerStory>
    <h6>large</h6>
    <SpacerStory data-size={'40px'} large>
      <DecorativePattern />
    </SpacerStory>
    <h6>xlarge</h6>
    <SpacerStory data-size={'50px'} xlarge>
      <DecorativePattern />
    </SpacerStory>
    <h6>xxlarge</h6>
    <SpacerStory data-size={'60px'} xxlarge>
      <DecorativePattern />
    </SpacerStory>
    <h6>xxxlarge</h6>
    <SpacerStory data-size={'80px'} xxxlarge>
      <DecorativePattern />
    </SpacerStory>
  </>
);

export const Default = Template.bind({});
Default.args = {
  size: ''
};