import React, { useEffect, useReducer, useRef } from 'react';
import { storiesOf } from '@storybook/react';
import { FormHandles } from '@unform/core';
import { Form } from '@unform/web';
import styled from 'styled-components';
import { Select, ISelectItems } from '.';

const css = styled.div;

const Style = css`
   background: white !important;
`;

storiesOf('Components/Forms/Select', module)
   .add('default', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}}>
                     <Select name="default">
                        <option value="Eren">Eren</option>
                        <option value="Levi">Levi</option>
                        <option value="Rainer">Rainer</option>
                        <option value="Falco">Falco</option>
                     </Select>
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('with options array', () => {
      const items: ISelectItems[] = [
         { name: 'Eren', id: 'Eren' },
         { name: 'Levi', id: 'Levi' },
         { name: 'Rainer', id: 'Rainer' },
         { name: 'Falco', id: 'Falco' },
      ];
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}}>
                     <Select name="default" items={items} />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('with title', () => {
      const items: ISelectItems[] = [
         { name: 'Eren', id: 'Eren' },
         { name: 'Levi', id: 'Levi' },
         { name: 'Rainer', id: 'Rainer' },
         { name: 'Falco', id: 'Falco' },
      ];
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}}>
                     <Select name="default" items={items} title="Characters" />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('with initial value', () => {
      const items: ISelectItems[] = [
         { name: 'Eren', id: 'Eren' },
         { name: 'Levi', id: 'Levi' },
         { name: 'Rainer', id: 'Rainer' },
         { name: 'Falco', id: 'Falco' },
      ];
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}} initialData={{ default: 'Falco' }}>
                     <Select name="default" items={items} title="Characters" />
                  </Form>
               </div>
            </div>
         </Style>
      );
   });
