import React, { useEffect, useReducer, useRef } from 'react';
import { storiesOf } from '@storybook/react';
import styled from 'styled-components';
import { Button } from '../Button';
import { PageModal } from './PageModal';

const css = styled.div;

const Style = css`
   padding: 20px;
`;

storiesOf('Components/PageModal', module)
   .add('modal mode', () => {
      return (
         <PageModal modal>
            <div className="page-modal-header">Modal Page</div>
            <div className="page-modal-body" style={{ width: 800 }}>
               Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
               industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
               scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
               into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the
               release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
               software like Aldus PageMaker including versions of Lorem Ipsum.
               <br />
               <br />
               Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
               industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
               scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
               into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the
               release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
               software like Aldus PageMaker including versions of Lorem Ipsum.
               <br />
               <br />
               Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
               industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
               scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
               into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the
               release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
               software like Aldus PageMaker including versions of Lorem Ipsum.
            </div>
            <div className="page-modal-actions">
               <Button>SD</Button>
               <Button>SD</Button>
            </div>
         </PageModal>
      );
   })
   .add('page mode', () => {
      return (
         <PageModal>
            <Style>
               <div className="page-modal-header">Modal Page</div>
               <div className="page-modal-body">
                  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                  industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
                  scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
                  into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the
                  release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
                  software like Aldus PageMaker including versions of Lorem Ipsum.
                  <br />
                  <br />
                  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                  industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
                  scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
                  into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the
                  release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
                  software like Aldus PageMaker including versions of Lorem Ipsum.
                  <br />
                  <br />
                  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                  industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
                  scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
                  into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the
                  release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
                  software like Aldus PageMaker including versions of Lorem Ipsum.
               </div>
               <div className="page-modal-actions">
                  <Button>SD</Button>
                  <Button>SD</Button>
               </div>
            </Style>
         </PageModal>
      );
   });
