import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
import { useDidUpdateEffect } from '@devesharp/react-hooks';
import { faSearch } from '@fortawesome/free-solid-svg-icons/faSearch';
import { faUser } from '@fortawesome/free-solid-svg-icons/faUser';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { storiesOf } from '@storybook/react';
import { FormHandles } from '@unform/core';
import { Form } from '@unform/web';
import { Observable } from 'rxjs';
import styled from 'styled-components';
import { IAutocompleteItem } from '../AutocompletePure';
import { SelectAutocomplete } from './SelectAutocomplete';

const fetchExample = (): Observable<IAutocompleteItem[]> =>
   new Observable((observable) => {
      setTimeout(() => {
         observable.next([
            { name: 'Star Platinum', value: 1 },
            { name: "Magician's Red", value: 2 },
            { name: 'Hermit Purple', value: 3 },
            { name: 'Hierophant Green', value: 4 },
            { name: 'Silver Chariot', value: 5 },
            { name: 'The Fool', value: 6 },
            { name: 'The World', value: 7 },
            { name: 'Tower of Gray', value: 8 },
            { name: 'Dark Blue Moon', value: 9 },
            { name: 'Strength', value: 10 },
            { name: 'Ebony Devil', value: 11 },
            { name: 'Yellow Temperance', value: 12 },
            { name: 'Hanged Man', value: 13 },
            { name: 'Emperor', value: 14 },
            { name: 'Empress', value: 15 },
            { name: 'Wheel of Fortune', value: 16 },
            { name: 'Justice', value: 17 },
            { name: 'Lovers', value: 18 },
            { name: 'Sun', value: 19 },
         ]);
         observable.complete();
         observable.unsubscribe();
      }, 100);
   });

const fetchNotExample = (): Observable<IAutocompleteItem[]> =>
   new Observable((observable) => {
      setTimeout(() => {
         observable.next([]);
         observable.complete();
         observable.unsubscribe();
      }, 100);
   });

storiesOf('Components/SelectComplete', module)
   .add('default', () => {
      return (
         <div className="m-4 max-input">
            <Form onSubmit={(e) => console.log(e)}>
               <SelectAutocomplete name="select" fetchItems={fetchExample} placeholder="Selecione..." />
               <button type="submit">Submit</button>
            </Form>
         </div>
      );
   })
   .add('inital data with unform', () => {
      return (
         <div className="m-4 max-input">
            <Form onSubmit={(e) => console.log(e)} initialData={{ select: { name: 'Strength', value: 10 } }}>
               <SelectAutocomplete name="select" fetchItems={fetchExample} placeholder="Selecione..." />
               <button type="submit">Submit</button>
            </Form>
         </div>
      );
   })
   .add('set data with unform', () => {
      const formRef = useRef<FormHandles>();

      useEffect(() => {
         formRef.current.setData({ select: { name: 'Strength', value: 10 } });
      }, []);

      return (
         <div className="m-4 max-input">
            <Form onSubmit={(e) => console.log(e)} ref={formRef} initialData={{ observation: '' }}>
               <SelectAutocomplete name="select" fetchItems={fetchExample} placeholder="Selecione..." />
               <button type="submit">Submit</button>
            </Form>
         </div>
      );
   })
   .add('initial data with state', () => {
      const [value, setValue] = useState<IAutocompleteItem>({ name: 'Strength', value: 10 });
      return (
         <div className="m-4 max-input">
            <SelectAutocomplete
               value={value}
               onChange={setValue}
               fetchItems={fetchExample}
               placeholder="Selecione..."
            />
         </div>
      );
   });
