import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import NavBar from './NavBar';
import {
  text,
  boolean,
  number,
  object,
  array,
  selectV2,
  date,
  color,
  button,
  select
} from '@storybook/addon-knobs/react';
import { withInfo } from '@storybook/addon-info';
import { linkTo } from '@storybook/addon-links'
import {Box,CloseButton} from '../Utils'
import {Modal, openModal} from '../Modal/Modal'
import Accordion from '../Accordion'
import Fixed from './FixedNavBar'

storiesOf('NavigationBar', module)
  .add('NavigationBar',
     withInfo('general purpose navigation bar which scrolls with the page. Use as a wrapper')(
          () => (
            <div>
              <Modal name='primary'/>
              <NavBar
                barBackground='yellow'
                bottomDrawerWidth={200}
                topDrawerWidth={300}
                closeMainOnMouseLeave={boolean('closeMainOnMouseLeave:',false)}
                items={[
                  <NavBar.BottomItem
                  renderItem = {()=>Box('100%','70px','red','opens bottom drawer',{margin:'5px'})}
                  renderDrawer = {(close)=>Box('100%','100%','blue',CloseButton(close))}
                  />,
                  <NavBar.BottomItem
                    renderItem = {()=>Box('100%','70px','red','opens bottom drawer',{margin:'5px'})}
                    renderDrawer = {(close)=>Box('100%','100%','green',CloseButton(close))}
                  />,
                  <NavBar.TopItem
                    renderItem = {()=>Box('100%','70px','red','opens top drawer',{margin:'5px'})}
                    renderDrawer = {(close)=>Box('100%','100%','green',CloseButton(close))}
                  />,
                  <NavBar.MainClickItem
                    renderItem = {()=>Box('70px','70px','red','opens main drawer on click',{margin:'5px'})}
                    renderDrawer = {(close)=>(
                      <Accordion
                        renderBase={(toggle)=>Box('20px','200px','blue',CloseButton(toggle))}
                        renderBody={(toggle)=>Box('200px','200px','red',CloseButton(close))}
                      />
                    )} 
                  />,
                  <NavBar.MainHoverItem
                    renderItem = {()=>Box('70px','70px','red','opens main drawer on hover',{margin:'5px'})}
                    renderDrawer = {(close)=>Box('100px','100px','pink',CloseButton(close))}
                  />,
                  <NavBar.Item
                    renderItem = {()=>Box('70px','70px','red',()=>(<div onClick={()=>{
                      openModal('primary',{
                        Component : () => <button style={{height:'30px',width:'30px'}} onClick={()=>alert(1)}></button>,
                        Heading : 'boom',
                      }
                    )}}>custom</div>),{margin:'5px'})}
                  />
                ]}
              >
                <div style={{'flexGrow':'1',background:'aqua', height:'700px'}}>
                </div>
              </NavBar>
            </div>
          )
     ))
  .add('FixedNavigationBar',
     withInfo('Nav Bar which is positioned fixed with respect to the page')(
          () => (
            <div style={{display:'flex'}}> 
              <Fixed
                barBackground='yellow'
                bottomDrawerWidth={200}
                topDrawerWidth={300}
                closeMainOnMouseLeave={boolean('closeMainOnMouseLeave:',false)}
                offsetTop={10}
                items={[
                  <Fixed.BottomItem
                  renderItem = {()=>Box('100%','70px','red','opens bottom drawer',{margin:'5px'})}
                  renderDrawer = {(close)=>Box('100%','100%','blue',CloseButton(close))}
                  />,
                  <Fixed.BottomItem
                    renderItem = {()=>Box('100%','70px','red','opens bottom drawer',{margin:'5px'})}
                    renderDrawer = {(close)=>Box('100%','100%','green',CloseButton(close))}
                  />,
                  <Fixed.TopItem
                    renderItem = {()=>Box('100%','70px','red','opens top drawer',{margin:'5px'})}
                    renderDrawer = {(close)=>Box('100%','100%','green',CloseButton(close))}
                  />,
                  <Fixed.MainClickItem
                    renderItem = {()=>Box('70px','70px','red','opens main drawer on click',{margin:'5px'})}
                    renderDrawer = {(close)=>(
                      <Accordion
                        renderBase={(toggle)=>Box('20px','200px','blue',CloseButton(toggle))}
                        renderBody={(toggle)=>Box('400px','200px','red',CloseButton(close))}
                      />
                    )} 
                  />,
                  <Fixed.MainHoverItem
                    renderItem = {()=>Box('70px','70px','red','opens main drawer on hover',{margin:'5px'})}
                    renderDrawer = {(close)=>Box('100px','100px','pink',CloseButton(close))}
                  />,
                  <Fixed.Item
                    renderItem = {()=>Box('70px','70px','red',()=>(<div onClick={()=>{
                      openModal('primary',{
                        Component : () => <button style={{height:'30px',width:'30px'}} onClick={()=>alert(1)}></button>,
                        Heading : 'boom',
                      }
                    )}}>custom</div>),{margin:'5px'})}
                  />
                ]}
              />
                
              <div style={{'flexGrow':'1',background:'aqua', height:'', width:'calc(100vw - 80px)'}}>
                <Modal name='primary'/>
              </div>
            </div>
          )
     ))

