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

const css = styled.div;

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

storiesOf('Components/Select', module)
   .add('default', () => {
      const optionsMonthRef = [
         { value: null, name: 'Selecione uma opção', disabled: true },
         ...CreateRange(12).map((i) => {
            const monthName = Calendar.monthsName[i];
            return {
               value: i + 1,
               name: `${monthName}`,
            };
         }),
      ];

      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>

                  <Form
                     onSubmit={(d) => {
                        console.log(d);
                     }}
                     initialData={{ month_ref: 3 }}
                  >
                     <Select
                        name="date_expired"
                        title="Apenas para boletos com vencimento em:"
                        options={optionsMonthRef}
                     />
                     <br />
                     <Select name="month_ref" title="Parcela referente ao mês" options={optionsMonthRef} />
                     <br />
                     <br />
                     <Button type="submit">Criar Boletos</Button>
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('without select value', () => {
      const formRef = useRef<FormHandles>();

      const [optionsAsync, setOptionsAsync] = useState([]);
      const [optionsAsync2, setOptionsAsync2] = useState([]);

      const options: ISelectOption[] = [
         { name: 'Eren', value: 'Eren' },
         { name: 'Levi', value: 'Levi' },
         { name: 'Rainer', value: 'Rainer' },
         { name: 'Falco', value: 'Falco' },
      ];

      const options2: ISelectOption[] = [
         { name: 'Select option', value: null, disabled: true },
         { name: 'Eren', value: 'Eren' },
         { name: 'Levi', value: 'Levi' },
         { name: 'Rainer', value: 'Rainer' },
         { name: 'Falco', value: 'Falco' },
      ];

      useEffect(() => {
         setOptionsAsync([
            { name: 'Eren', value: 'Eren' },
            { name: 'Levi', value: 'Levi' },
            { name: 'Rainer', value: 'Rainer' },
            { name: 'Falco', value: 'Falco' },
         ]);

         setOptionsAsync2([
            { name: 'Select option', value: null, disabled: true },
            { 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 ref={formRef} onSubmit={(data) => console.log(data)} initialData={{ default5: 'Falco' }}>
                     <Select name="default" options={options} title="Characters" />
                     <div>
                        <b>Default:</b> Eren
                     </div>
                     <br />

                     <Select name="default2" options={options2} title="Characters" />
                     <div>
                        <b>Default:</b> Select option
                     </div>
                     <br />

                     <Select name="default3" options={optionsAsync} title="Characters" />
                     <div>
                        <b>Default:</b> Eren
                     </div>
                     <br />

                     <Select name="default4" options={optionsAsync2} title="Characters" />
                     <div>
                        <b>Default:</b> Select option
                     </div>
                     <br />

                     <Select name="default5" options={optionsAsync} title="Characters" />
                     <div>
                        <b>Default:</b> Falco
                     </div>
                     <br />

                     <Button type="submit">Submit</Button>
                  </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 set async', () => {
      const options: ISelectOption[] = [
         { value: 'M', name: 'Male' },
         { value: 'F', name: 'Female' },
         { value: 'D', name: 'Disabled', disabled: true },
      ];

      const formRef = useRef<FormHandles>();

      useEffect(() => {
         formRef.current.setFieldValue('select', '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 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>
      );
   });
