import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import {Modal, openModal, closeModal} from './Modal'
import ConfirmationModal from './ConfirmationModal'
import {
  text,
  boolean,
  number,
  object,
  array,
  selectV2,
  date,
  color,
  button
} from '@storybook/addon-knobs/react';
import { withInfo } from '@storybook/addon-info';
import { linkTo } from '@storybook/addon-links'
import styled from 'styled-components';
import {Box} from '../Utils'

storiesOf('Modal', module)
  .add('One Modal',
     withInfo('Component and Heading are necessary inputs. If heading is a text, the default header is used. Ideally, your modal components should be high up in the tree near the routes as they do not need to re-render whenever your containers do')(
          () => {
              return <div>
                <button onClick={()=>openModal('primary',
                  {
                    Component : () =>Box('100%','100%','blue','content'),
                    Heading : 'headingText',
                  }
                )}>Open Primary Modal</button>
                <Modal name='primary'/>
              </div>
          }
     ))
  .add('Two Modals',
     withInfo('Pass a styled div(from styled-components) as StyleWrapper to override outer styles.')(
          () => {
            	return <div>
                <button onClick={()=>openModal('below',
                  {
                    Component : () =>Box('100%','100%','blue',()=>(
                      <button onClick={()=>openModal('above',
                        {
                          Component : () =>Box('100%','100%','red',()=>(
                            <button onClick={()=>closeModal('below')}>Close Primary Modal</button>
                          )),
                          Heading : 'Secondary',
                          StyleWrapper : styled.div`
                            .ReactModal__Overlay{
                              z-index : 2019;
                            }
                          `,
                          height : 200,
                          width : 200
                        }
                      )}>Open Secondary Modal</button>
                    )),
                    Heading : 'Primary',
                  }
                )}>Open Primary Modal</button>
                <Modal name='above'/>
                <Modal name='below'/>
              </div>
          }
     ))
     .add('Confirm Modal',
        withInfo('Confirmation with callback')(
             () => {
                 return <div>
                   <ConfirmationModal height={400} modalKey='confirm' body='Are you sure you want to delete this Trip?' heading="Delete Trip" callBack={() => console.log("Callback")} reasons={[{label: "Not required", value:"1"}]} onReasonSelect={() => console.log("Reason select")}>
                     <button>Open Confirmation Modal</button>
                   </ConfirmationModal>
                   <Modal name='confirm'/>
                 </div>
             }
        ))
