import React, { useEffect, useReducer, useRef, useState } from 'react';
import { action } from '@storybook/addon-actions';
import { storiesOf } from '@storybook/react';
import { FormHandles } from '@unform/core';
import { Form } from '@unform/web';
import styled from 'styled-components';
import { Select, ISelectOption } from './index';

const css = styled.div;

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

storiesOf('Components/Select', module)
   .add('default', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}}>
                     <Select name="default">
                        <option value={null} disabled selected>
                           Selecionar um valor
                        </option>
                        <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('loading', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}}>
                     <Select name="default" loading>
                        <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 options: ISelectOption[] = [
         { name: 'Eren asdasdadsasd asdasdasddsaasdasdasdasasdasd', value: 'Eren' },
         { name: 'Levi', value: 'Levi' },
         { name: 'Rainer', value: 'Rainer' },
         { name: 'Falco', value: 'Falco' },
      ];
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}}>
                     <Select name="default" options={options} />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('with title', () => {
      const options: ISelectOption[] = [
         { name: 'Eren', value: 'Eren' },
         { name: 'Levi', value: 'Levi' },
         { name: 'Rainer', value: 'Rainer' },
         { name: 'Falco', value: 'Falco' },
      ];
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}}>
                     <Select name="default" options={options} title="Characters" />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('with initial value', () => {
      const options: ISelectOption[] = [
         { name: 'Eren', value: 'Eren' },
         { name: 'Levi', value: 'Levi' },
         { name: 'Rainer', value: 'Rainer' },
         { name: 'Falco', value: 'Falco' },
      ];
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}} initialData={{ default: 'Falco' }}>
                     <Select name="default" options={options} title="Characters" />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('with initial value 2', () => {
      const [options, setOptions] = useState([]);

      useEffect(() => {
         setOptions([
            { value: 'ocean', name: 'Ocean' },
            { value: 'blue', name: 'Blue' },
            { value: 'purple', name: 'Purple' },
            { value: 'red', name: 'Red' },
            { value: 'orange', name: 'Orange' },
            { value: 'yellow', name: 'Yellow' },
            { value: 'green', name: 'Green' },
            { value: 'forest', name: 'Forest' },
            { value: 'slate', name: 'Slate' },
            { value: 'silver', name: 'Silver' },
         ]);
      }, []);

      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}} initialData={{ default: 'red' }}>
                     <Select name="default" options={options} title="Characters" />
                     <div>
                        <b>Default:</b> Red
                     </div>
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('with disable first', () => {
      const options: ISelectOption[] = [
         { value: { id: 'D' }, name: 'Disabled', disabled: true },
         { value: { id: 'M' }, name: 'Male' },
         { value: { id: 'F' }, name: 'Female' },
      ];
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={(b) => action('data')(b)}>
                     <Select name="select" options={options} title="Characters" />
                     <button>asads</button>
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('with initial value object async', () => {
      const options: ISelectOption[] = [
         { value: { id: 'M' }, name: 'Male' },
         { value: { id: 'F' }, name: 'Female' },
         { value: { id: 'D' }, name: 'Disabled', disabled: true },
      ];

      const formRef = useRef<FormHandles>();

      useEffect(() => {
         formRef.current.setFieldValue('select', { id: 'F' });
      }, []);
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}} ref={formRef}>
                     <Select name="select" options={options} title="Characters" />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('with inital value object value', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <div>Initial value Female:</div>
                  <br />
                  <Form onSubmit={() => {}} initialData={{ select: { id: 'F' } }}>
                     <Select
                        color="pink"
                        name="select"
                        options={[
                           { value: { id: 'M' }, name: 'Male' },
                           { value: { id: 'F' }, name: 'Female' },
                           { value: { id: 'D' }, name: 'Disabled', disabled: true },
                        ]}
                     />
                  </Form>
                  <br />
                  <div>Initial value wrong:</div>
                  <br />
                  <Form onSubmit={() => {}} initialData={{ select: { id: 'T' } }}>
                     <Select
                        color="pink"
                        name="select"
                        options={[
                           { value: { id: 'M' }, name: 'Male' },
                           { value: { id: 'F' }, name: 'Female' },
                           { value: { id: 'D' }, name: 'Disabled', disabled: true },
                        ]}
                     />
                  </Form>
               </div>
            </div>
         </Style>
      );
   });
