import React, { useRef, useState } 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 {
      margin: 5px;
      padding: 0 10px;
      background: crimson;
      color: white;
      text-align: center;
      font-size: 1.5em;
   }
`;

storiesOf('Components/FlexItem', module).add('FlexContainer direction', () => {
   return (
      <Style>
         <div className="p-4">
            <div>
               <b>flex-grow: 0;</b>
            </div>
            <FlexContainer width="350px" className="bg-flex-container">
               <FlexItem className="item" grow={0}>
                  1
               </FlexItem>
               <FlexItem className="item" grow={0}>
                  2
               </FlexItem>
               <FlexItem className="item" grow={0}>
                  3
               </FlexItem>
            </FlexContainer>
         </div>

         <div className="p-4">
            <div>
               <b>flex-grow: 1;</b>
            </div>
            <FlexContainer width="350px" className="bg-flex-container">
               <FlexItem className="item" grow={1}>
                  1
               </FlexItem>
               <FlexItem className="item" grow={1}>
                  2
               </FlexItem>
               <FlexItem className="item" grow={1}>
                  3
               </FlexItem>
            </FlexContainer>
         </div>

         <div className="p-4">
            <div>
               <b>flex-grow: 2;</b>
            </div>
            <FlexContainer width="350px" className="bg-flex-container">
               <FlexItem className="item" grow={2}>
                  1
               </FlexItem>
               <FlexItem className="item" grow={2}>
                  2
               </FlexItem>
               <FlexItem className="item" grow={2}>
                  3
               </FlexItem>
            </FlexContainer>
         </div>

         <div className="p-4">
            <div>
               <b>flex-grow: 1; // conteúdo largo</b>
            </div>
            <FlexContainer width="350px" className="bg-flex-container">
               <FlexItem className="item" grow={1}>
                  1
               </FlexItem>
               <FlexItem className="item" grow={1}>
                  TestandoTestando2
               </FlexItem>
               <FlexItem className="item" grow={1}>
                  3
               </FlexItem>
            </FlexContainer>
         </div>

         <div className="p-4">
            <div>
               <b>flex-grow: (misturado)</b>
            </div>
            <FlexContainer width="350px" className="bg-flex-container">
               <FlexItem className="item" grow={0}>
                  1
               </FlexItem>
               <FlexItem className="item" grow={1}>
                  2
               </FlexItem>
               <FlexItem className="item" grow={2}>
                  3
               </FlexItem>
            </FlexContainer>
         </div>
      </Style>
   );
});
