import React, { useEffect, useState } from 'react';
import { storiesOf } from '@storybook/react';
import { Button } from '../Button';
import { CloseBtn } from '../CloseBtn';
import { Input } from '../Input';
import { Textarea } from '../Textarea';
import { ModalPage } from './index';

storiesOf('Components/ModalPage', module)
   .add('default', () => {
      const [show, setShow] = useState(true);

      return (
         <>
            <Button variant="light" onClick={() => setShow(true)}>
               Open modal
            </Button>
            <ModalPage show={show} onRequestClose={() => setShow(false)} title="Create contact">
               <ModalPage.Body>
                  <div className="pb-2">
                     <Input title="name" />
                  </div>
                  <div className="pb-2">
                     <Input title="email" />
                  </div>
                  <div className="pb-2">
                     <Input title="phone 1" />
                  </div>
                  <div className="pb-2">
                     <Input title="phone 2" />
                  </div>
                  <div className="pb-2">
                     <Input title="phone 3" />
                  </div>
                  <div className="pb-2">
                     <Textarea title="comments" />
                  </div>

                  <div className="pb-2">
                     <Input title="city" />
                  </div>
                  <div className="pb-2">
                     <Input title="neighborhood" />
                  </div>
                  <div className="pb-2">
                     <Input title="address" />
                  </div>
               </ModalPage.Body>
               <ModalPage.Actions>
                  <Button>Action</Button>
                  &nbsp;&nbsp;
                  <Button variant="light">Cancel</Button>
               </ModalPage.Actions>
            </ModalPage>
         </>
      );
   })
   .add('with pageView', () => {
      const [show, setShow] = useState(true);

      return (
         <>
            <ModalPage pageView>
               <ModalPage.Body>
                  <div className="pb-2">
                     <Input title="name" />
                  </div>
                  <div className="pb-2">
                     <Input title="email" />
                  </div>
                  <div className="pb-2">
                     <Input title="phone 1" />
                  </div>
                  <div className="pb-2">
                     <Input title="phone 2" />
                  </div>
                  <div className="pb-2">
                     <Input title="phone 3" />
                  </div>
                  <div className="pb-2">
                     <Textarea title="comments" />
                  </div>

                  <div className="pb-2">
                     <Input title="city" />
                  </div>
                  <div className="pb-2">
                     <Input title="neighborhood" />
                  </div>
                  <div className="pb-2">
                     <Input title="address" />
                  </div>
               </ModalPage.Body>
               <ModalPage.Actions>
                  <Button>Action</Button>
                  &nbsp;&nbsp;
                  <Button variant="light">Cancel</Button>
               </ModalPage.Actions>
            </ModalPage>
         </>
      );
   });
