import React from 'react';
import {useState} from 'react';
import { storiesOf } from '@storybook/react';
import { Dropdown } from './index';

storiesOf('Components/Dropdown', module)
   .add('default', () => (
      <div className="m-4">
         <div style={{left: 0, top:0, position: 'absolute'}}>
            <Dropdown
               options={[
                  {
                     name: <b>Eren Yeager xdads sdsa asdas dadsadsads</b>,
                     value: 'yeager',
                     disabled: true
                  },
                  {
                     name: <b>Eren Krueger</b>,
                     value: 'kruger',
                  },
               ]}
               onClick={() => {
                  console.log('sdsd');
               }}
            >
               <button className="btn btn-dark" type="button">
                  DropMenu
               </button>
            </Dropdown>
         </div>

         <div style={{right: 0, top:0, position: 'absolute'}}>
            <Dropdown
               options={[
                  {
                     name: <b>Eren Yeager xdads sdsa asdas dadsadsads</b>,
                     value: 'yeager',
                  },
                  {
                     name: <b>Eren Krueger</b>,
                     value: 'kruger',
                  },
               ]}
               onClick={() => {
                  console.log('sdsd');
               }}
            >
               <button className="btn btn-dark" type="button">
                  DropMenu
               </button>
            </Dropdown>
         </div>

         <div style={{left: 0, bottom:0, position: 'absolute'}}>
            <Dropdown
               options={[
                  {
                     name: <b>Eren Yeager xdads sdsa asdas dadsadsads</b>,
                     value: 'yeager',
                  },
                  {
                     name: <b>Eren Krueger</b>,
                     value: 'kruger',
                  },
               ]}
               onClick={() => {
                  console.log('sdsd');
               }}
            >
               <button className="btn btn-dark" type="button">
                  DropMenu
               </button>
            </Dropdown>
         </div>
         
         <div style={{right: 0, bottom:0, position: 'absolute'}}>
            <Dropdown
               options={[
                  {
                     name: <b>Eren Yeager xdads sdsa asdas dadsadsads</b>,
                     value: 'yeager',
                  },
                  {
                     name: <b>Eren Krueger</b>,
                     value: 'kruger',
                  },
               ]}
               onClick={() => {
                  console.log('sdsd');
               }}
            >
               <button className="btn btn-dark" type="button">
                  DropMenu
               </button>
            </Dropdown>
         </div>
      </div>
   ))
   .add('check scroll to', () => (
      <div className="m-4">
         <div style={{ height: 100, overflow: 'auto', }} >
         <Dropdown
            options={[
               {
                  name: <b>Eren Yeager xdads sdsa asdas dadsadsads</b>,
                  value: 'yeager',
               },
               {
                  name: <b>Eren Krueger</b>,
                  value: 'kruger',
               },
               {
                  name: <b>Eren Yeager xdads sdsa asdas dadsadsads</b>,
                  value: 'yeager',
               },
               {
                  name: <b>Eren Krueger</b>,
                  value: 'kruger',
               },
            ]}
            onClick={() => {
               console.log('sdsd');
            }}
         >
            <button className="btn btn-dark" type="button">
               DropMenu
            </button>
         </Dropdown>
         </div>
         <div style={{ height: 400 }} />
      </div>
   ))
.add('with header', () => (
   <div className="m-4">
      <div style={{ height: 400 }} />
      <Dropdown
         options={[
            {
               name: <b>Eren Yeager xdads sdsa asdas dadsadsads</b>,
               value: 'yeager',
            },
            {
               name: <b>Eren Krueger</b>,
               value: 'kruger',
            },
         ]}
         Header={() => <>
            <div className="dropdown-header">Header</div>
         </>}
         onClick={() => {
            console.log('sdsd');
         }}
      >
         <button className="btn btn-dark" type="button">
            DropMenu
         </button>
      </Dropdown>
      <div style={{ height: 400 }} />
   </div>
))
   .add('controlled', () => {
      const [open, setOpen] = useState(true);
      return <div>
         <button onClick={() => setOpen(!open)}>
            Toogle
         </button>
         <Dropdown
            open={open}
            onChange={setOpen}
            options={[
               {
                  name: <b>Eren Yeager xdads sdsa asdas dadsadsads</b>,
                  value: 'yeager',
               },
               {
                  name: <b>Eren Krueger</b>,
                  value: 'kruger',
               },
            ]}
            Header={() => <>
               <div className="dropdown-header">Header</div>
            </>}
            onClick={() => {
               console.log('sdsd');
            }}
         >
            <button className="btn btn-dark" type="button">
               DropMenu
            </button>
         </Dropdown>
      </div>
   })
;
