import React from 'react';
import { storiesOf } from '@storybook/react';
import styled from 'styled-components';
import { FlexContainer, FlexItem } from './index';

const css = styled.div;

const Style = css`
   background: white !important;
   height: 100%;
   width: 100%;

   .bg-flex-container {
      background: #333 !important;
   }

   .number {
      margin: 5px;
      font-weight: 800;
      font-size: 22px;
      color: white;
      text-align: center;
   }

   .item-default {
      margin: 5px;
      padding: 0 10px;
      background: crimson;
      color: white;
      text-align: center;
      font-size: 1.5em;
   }

   .item {
      flex: 1;
      margin: 5px;
      padding: 0 10px;
      background: crimson;
      color: white;
      text-align: center;
      font-size: 1.5em;
   }
`;

function FlexItems(): any {
   return (
      <>
         <FlexItem className="item-default">
            <div className="number">1</div>
         </FlexItem>
         <FlexItem className="item-default">
            <div className="number">2</div>
         </FlexItem>
         <FlexItem className="item-default">
            <div className="number">3</div>
         </FlexItem>
      </>
   );
}

storiesOf('Components/FlexContainer', module)
   .add('FlexContainer direction', () => {
      return (
         <Style>
            <div className="p-4">
               <div>
                  <b>Row</b>
               </div>
               <FlexContainer width="200px" height="200px" inlineFlex className="bg-flex-container" direction="row">
                  <FlexItem className="item-default" flex={1}>
                     <div className="number">1</div>
                  </FlexItem>
                  <FlexItem className="item-default" flex={1}>
                     <div className="number">2</div>
                  </FlexItem>
                  <FlexItem className="item-default" flex={1}>
                     <div className="number">3</div>
                  </FlexItem>
               </FlexContainer>
            </div>

            <div className="p-4">
               <div>
                  <b>row-reverse</b>
               </div>
               <FlexContainer
                  width="200px"
                  height="200px"
                  inlineFlex
                  className="bg-flex-container"
                  direction="row-reverse"
               >
                  <FlexItem className="item-default" flex={1}>
                     <div className="number">1</div>
                  </FlexItem>
                  <FlexItem className="item-default" flex={1}>
                     <div className="number">2</div>
                  </FlexItem>
                  <FlexItem className="item-default" flex={1}>
                     <div className="number">3</div>
                  </FlexItem>
               </FlexContainer>
            </div>

            <div className="p-4">
               <div>
                  <b>column</b>
               </div>
               <FlexContainer width="200px" height="200px" inlineFlex className="bg-flex-container" direction="column">
                  <FlexItem className="item-default" flex={1}>
                     <div className="number">1</div>
                  </FlexItem>
                  <FlexItem className="item-default" flex={1}>
                     <div className="number">2</div>
                  </FlexItem>
                  <FlexItem className="item-default" flex={1}>
                     <div className="number">3</div>
                  </FlexItem>
               </FlexContainer>
            </div>

            <div className="p-4">
               <div>
                  <b>column-reverse</b>
               </div>
               <FlexContainer
                  width="200px"
                  height="200px"
                  inlineFlex
                  className="bg-flex-container"
                  direction="column-reverse"
               >
                  <FlexItem className="item-default" flex={1}>
                     <div className="number">1</div>
                  </FlexItem>
                  <FlexItem className="item-default" flex={1}>
                     <div className="number">2</div>
                  </FlexItem>
                  <FlexItem className="item-default" flex={1}>
                     <div className="number">3</div>
                  </FlexItem>
               </FlexContainer>
            </div>
         </Style>
      );
   })
   .add('FlexContainer justifyContent', () => {
      return (
         <Style>
            <div className="p-4">
               <div>
                  <b>flex-start</b>
               </div>
               <FlexContainer width="200px" height="200px" className="bg-flex-container" justifyContent="flex-start">
                  <FlexItem className="item-default">
                     <div className="number">1</div>
                  </FlexItem>
                  <FlexItem className="item-default">
                     <div className="number">2</div>
                  </FlexItem>
                  <FlexItem className="item-default">
                     <div className="number">3</div>
                  </FlexItem>
               </FlexContainer>
            </div>
            <div className="p-4">
               <div>
                  <b>flex-end</b>
               </div>
               <FlexContainer width="200px" height="200px" className="bg-flex-container" justifyContent="flex-end">
                  <FlexItem className="item-default">
                     <div className="number">1</div>
                  </FlexItem>
                  <FlexItem className="item-default">
                     <div className="number">2</div>
                  </FlexItem>
                  <FlexItem className="item-default">
                     <div className="number">3</div>
                  </FlexItem>
               </FlexContainer>
            </div>
            <div className="p-4">
               <div>
                  <b>center</b>
               </div>
               <FlexContainer width="200px" height="200px" className="bg-flex-container" justifyContent="center">
                  <FlexItem className="item-default">
                     <div className="number">1</div>
                  </FlexItem>
                  <FlexItem className="item-default">
                     <div className="number">2</div>
                  </FlexItem>
                  <FlexItem className="item-default">
                     <div className="number">3</div>
                  </FlexItem>
               </FlexContainer>
            </div>
            <div className="p-4">
               <div>
                  <b>space-between</b>
               </div>
               <FlexContainer width="200px" height="200px" className="bg-flex-container" justifyContent="space-between">
                  <FlexItem className="item-default">
                     <div className="number">1</div>
                  </FlexItem>
                  <FlexItem className="item-default">
                     <div className="number">2</div>
                  </FlexItem>
                  <FlexItem className="item-default">
                     <div className="number">3</div>
                  </FlexItem>
               </FlexContainer>
            </div>
            <div className="p-4">
               <div>
                  <b>space-around</b>
               </div>
               <FlexContainer width="200px" height="200px" className="bg-flex-container" justifyContent="space-around">
                  <FlexItem className="item-default">
                     <div className="number">1</div>
                  </FlexItem>
                  <FlexItem className="item-default">
                     <div className="number">2</div>
                  </FlexItem>
                  <FlexItem className="item-default">
                     <div className="number">3</div>
                  </FlexItem>
               </FlexContainer>
            </div>
         </Style>
      );
   })
   .add('FlexContainer wrap', () => {
      return (
         <Style>
            <div className="p-4">
               <div>
                  <b>nowrap</b>
               </div>
               <FlexContainer width="200px" height="200px" className="bg-flex-container" wrap="nowrap">
                  <FlexItem className="item-default">Long Text Long Text</FlexItem>
                  <FlexItem className="item-default">Long Text Long Text</FlexItem>
                  <FlexItem className="item-default">Long Text Long Text</FlexItem>
               </FlexContainer>
            </div>
            <div className="p-4">
               <div>
                  <b>wrap</b>
               </div>
               <FlexContainer width="200px" height="200px" className="bg-flex-container" wrap="wrap">
                  <FlexItem className="item-default">Long Text</FlexItem>
                  <FlexItem className="item-default">Long Text</FlexItem>
                  <FlexItem className="item-default">Long Text Long Text Long Text Long Text</FlexItem>
               </FlexContainer>
            </div>
            <div className="p-4">
               <div>
                  <b>wrap-reverse</b>
               </div>
               <FlexContainer width="200px" height="200px" className="bg-flex-container" wrap="wrap-reverse">
                  <FlexItem className="item-default">1 - Long Text</FlexItem>
                  <FlexItem className="item-default">2 - Long Text</FlexItem>
                  <FlexItem className="item-default">3 - Long Text Long Text Long Text Long Text</FlexItem>
               </FlexContainer>
            </div>
         </Style>
      );
   })
   .add('FlexContainer alignItems', () => {
      return (
         <Style>
            <div className="p-4">
               <div>
                  <b>stretch</b>
               </div>
               <FlexContainer width="200px" height="200px" className="bg-flex-container" alignItems="stretch">
                  <FlexItems />
               </FlexContainer>
            </div>
            <div className="p-4">
               <div>
                  <b>flex-start</b>
               </div>
               <FlexContainer width="200px" height="200px" className="bg-flex-container" alignItems="flex-start">
                  <FlexItems />
               </FlexContainer>
            </div>
            <div className="p-4">
               <div>
                  <b>flex-end</b>
               </div>
               <FlexContainer width="200px" height="200px" className="bg-flex-container" alignItems="flex-end">
                  <FlexItems />
               </FlexContainer>
            </div>
            <div className="p-4">
               <div>
                  <b>center</b>
               </div>
               <FlexContainer width="200px" height="200px" className="bg-flex-container" alignItems="center">
                  <FlexItems />
               </FlexContainer>
            </div>
            <div className="p-4">
               <div>
                  <b>baseline</b>
               </div>
               <FlexContainer width="200px" height="200px" className="bg-flex-container" alignItems="baseline">
                  <FlexItems />
               </FlexContainer>
            </div>
         </Style>
      );
   })
   .add('FlexContainer alignContent', () => {
      return (
         <Style>
            <div className="p-4">
               <div>
                  <b>stretch</b>
               </div>
               <FlexContainer
                  width="200px"
                  height="450px"
                  className="bg-flex-container"
                  alignContent="stretch"
                  wrap="wrap"
               >
                  <div className="item">TestandoPalavra1</div>
                  <div className="item">Teste 2 do Item</div>
                  <div className="item">Teste 3 do Item Agora Mesmo</div>
                  <div className="item">Teste 4</div>
                  <div className="item">Teste 5</div>
                  <div className="item">Teste 6</div>
                  <div className="item">Teste 7</div>
                  <div className="item">Teste 8</div>
               </FlexContainer>
            </div>
            <div className="p-4">
               <div>
                  <b>flex-start</b>
               </div>
               <FlexContainer
                  width="200px"
                  height="450px"
                  className="bg-flex-container"
                  wrap="wrap"
                  alignContent="flex-start"
               >
                  <div className="item">TestandoPalavra1</div>
                  <div className="item">Teste 2 do Item</div>
                  <div className="item">Teste 3 do Item Agora Mesmo</div>
                  <div className="item">Teste 4</div>
                  <div className="item">Teste 5</div>
                  <div className="item">Teste 6</div>
                  <div className="item">Teste 7</div>
                  <div className="item">Teste 8</div>
               </FlexContainer>
            </div>
            <div className="p-4">
               <div>
                  <b>flex-end</b>
               </div>
               <FlexContainer
                  width="200px"
                  height="450px"
                  className="bg-flex-container"
                  wrap="wrap"
                  alignContent="flex-end"
               >
                  <div className="item">TestandoPalavra1</div>
                  <div className="item">Teste 2 do Item</div>
                  <div className="item">Teste 3 do Item Agora Mesmo</div>
                  <div className="item">Teste 4</div>
                  <div className="item">Teste 5</div>
                  <div className="item">Teste 6</div>
                  <div className="item">Teste 7</div>
                  <div className="item">Teste 8</div>
               </FlexContainer>
            </div>
            <div className="p-4">
               <div>
                  <b>center</b>
               </div>
               <FlexContainer
                  width="200px"
                  height="450px"
                  className="bg-flex-container"
                  wrap="wrap"
                  alignContent="center"
               >
                  <div className="item">TestandoPalavra1</div>
                  <div className="item">Teste 2 do Item</div>
                  <div className="item">Teste 3 do Item Agora Mesmo</div>
                  <div className="item">Teste 4</div>
                  <div className="item">Teste 5</div>
                  <div className="item">Teste 6</div>
                  <div className="item">Teste 7</div>
                  <div className="item">Teste 8</div>
               </FlexContainer>
            </div>
            <div className="p-4">
               <div>
                  <b>space-between</b>
               </div>
               <FlexContainer
                  width="200px"
                  height="450px"
                  className="bg-flex-container"
                  wrap="wrap"
                  alignContent="space-between"
               >
                  <div className="item">TestandoPalavra1</div>
                  <div className="item">Teste 2 do Item</div>
                  <div className="item">Teste 3 do Item Agora Mesmo</div>
                  <div className="item">Teste 4</div>
                  <div className="item">Teste 5</div>
                  <div className="item">Teste 6</div>
                  <div className="item">Teste 7</div>
                  <div className="item">Teste 8</div>
               </FlexContainer>
            </div>
            <div className="p-4">
               <div>
                  <b>space-around</b>
               </div>
               <FlexContainer
                  width="200px"
                  height="450px"
                  className="bg-flex-container"
                  wrap="wrap"
                  alignContent="space-around"
               >
                  <div className="item">TestandoPalavra1</div>
                  <div className="item">Teste 2 do Item</div>
                  <div className="item">Teste 3 do Item Agora Mesmo</div>
                  <div className="item">Teste 4</div>
                  <div className="item">Teste 5</div>
                  <div className="item">Teste 6</div>
                  <div className="item">Teste 7</div>
                  <div className="item">Teste 8</div>
               </FlexContainer>
            </div>
         </Style>
      );
   });
