import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
import { action } from '@storybook/addon-actions';
import { storiesOf } from '@storybook/react';
import { Form } from '@unform/web';
import { Observable } from 'rxjs';
import { IAutocompleteItem } from '../AutocompletePure';
import { Autocomplete } from './Autocomplete';

const fetchExample = (): Observable<IAutocompleteItem[]> =>
   new Observable((observable) => {
      setTimeout(() => {
         observable.next([
            { name: 'Bairro', disabled: true, value: { title: true } },
            { name: 'Mogi das cruzes', value: 1 },
            { name: 'Suzano', value: 2 },
            { name: 'Cidade', disabled: true, value: { title: true } },
            { name: 'São Paulo', value: 3 },
            { name: 'Suzano', value: 4 },
            { name: 'Guarulhos', value: 5 },
            { name: 'Guarulhos', value: 5 },
            { name: 'Guarulhos', value: 5 },
            { name: 'Guarulhos', value: 5 },
            { name: 'Guarulhos', value: 5 },
         ]);
         observable.complete();
         observable.unsubscribe();
      }, 100);
   });

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

storiesOf('Components/AutoComplete', module)
   .add('default', () => {
      return (
         <div className="m-4 max-input">
            <Form onSubmit={(e) => console.log(e)}>
               <Autocomplete onSelect={action('onSelect')} fetchItems={fetchExample} />
               <button type="submit">Submit</button>
            </Form>
         </div>
      );
   })
   .add('with cleanAfterSelect', () => {
      return (
         <div className="m-4 max-input">
            <Form onSubmit={(e) => console.log(e)}>
               <Autocomplete onSelect={action('onSelect')} fetchItems={fetchExample} cleanAfterSelect />
               <button type="submit">Submit</button>
            </Form>
         </div>
      );
   })
   .add('with renderRow', () => {
      function RenderRow({ name, value }: any) {
         return <div className={`${value.title && 'text-danger'}`}>{name}</div>;
      }

      return (
         <div className="m-4 max-input">
            <Autocomplete
               onSelect={action('onSelect')}
               fetchItems={fetchExample}
               cleanAfterSelect
               renderRow={(name, item) => <RenderRow name={name} value={item} />}
            />
         </div>
      );
   })
   .add('with NotFoundComponent', () => {
      function NotFoundComponent(): any {
         return <div className="text-danger p-2">Não encontrado</div>;
      }
      return (
         <div className="m-4 max-input">
            <Form onSubmit={(e) => console.log(e)}>
               <Autocomplete
                  onSelect={action('onSelect')}
                  fetchItems={fetchNotExample}
                  cleanAfterSelect
                  NotFoundComponent={NotFoundComponent}
               />
               <button type="submit">Submit</button>
            </Form>
         </div>
      );
   });
