import React, { useEffect, useRef } from 'react';
import { storiesOf } from '@storybook/react';
import { FormHandles } from '@unform/core';
import { Form } from '@unform/web';
import { Observable } from 'rxjs';
import { Input } from '../Input/web';
import { InputAutoComplete } from './InputAutoComplete';

const fetchGroupMock = (): Observable<any> =>
   new Observable((observable) => {
      setTimeout(() => {
         observable.next([
            { disabled: true, name: 'Bairro', title: true },
            { name: 'Mogi das cruzes' },
            { name: 'Suzano' },
            { disabled: true, name: 'Cidade', title: true },
            { name: 'São Paulo' },
            { name: 'Suzano' },
            { name: 'Guarulhos' },
         ]);
         observable.complete();
         observable.unsubscribe();
      }, 100);
   });

const fetchSimpleMock = (): Observable<any> =>
   new Observable((observable) => {
      setTimeout(() => {
         observable.next(['São Paulo', 'Suzano', 'Guarulhos']);
         observable.complete();
         observable.unsubscribe();
      }, 100);
   });

storiesOf('Components/Forms/InputAutoComplete', module)
   .add('default', () => (
      <div className="m-4">
         <Form onSubmit={() => {}}>
            <InputAutoComplete
               fetch={fetchSimpleMock}
               name="autocomplete"
               getValueText={(v) => v}
               renderInput={(item: any) => <div>{item}</div>}
            />
         </Form>
      </div>
   ))
   .add('with title', () => (
      <div className="m-4">
         <Form onSubmit={() => {}}>
            <InputAutoComplete
               fetch={fetchSimpleMock}
               name="autocomplete"
               title="Autocomplete"
               getValueText={(v) => v}
               renderInput={(item: any) => <div>{item}</div>}
            />
         </Form>
      </div>
   ))
   .add('with object fetch', () => (
      <div className="m-4">
         <Form onSubmit={() => {}}>
            <InputAutoComplete
               fetch={fetchGroupMock}
               name="autocomplete"
               title="Autocomplete"
               getValueText={(v) => v.name}
               renderInput={(item: any) => (
                  <div>
                     {item.title && <b>{item.name}</b>}
                     {!item.title && <>{item.name}</>}
                  </div>
               )}
            />
         </Form>
      </div>
   ))
   .add('with initial data', () => (
      <div className="m-4">
         <Form onSubmit={() => {}} initialData={{ autocomplete: 'Suzano' }}>
            <InputAutoComplete
               fetch={fetchGroupMock}
               name="autocomplete"
               title="Autocomplete"
               getValueText={(v) => v.name}
               renderInput={(item: any) => (
                  <div>
                     {item.title && <b>{item.name}</b>}
                     {!item.title && <>{item.name}</>}
                  </div>
               )}
            />
         </Form>
      </div>
   ))
   .add('prefix with prefix', () => {
      return (
         <div className="m-4">
            <Form onSubmit={() => {}} initialData={{ autocomplete: 'Suzano' }}>
               <InputAutoComplete
                  fetch={fetchGroupMock}
                  prefix={<i className="fas fa-user" />}
                  name="autocomplete"
                  title="Autocomplete"
                  getValueText={(v) => v.name}
                  renderInput={(item: any) => (
                     <div>
                        {item.title && <b>{item.name}</b>}
                        {!item.title && <>{item.name}</>}
                     </div>
                  )}
               />
            </Form>
         </div>
      );
   })
   .add('with error', () => {
      const formRef = useRef<FormHandles>();

      useEffect(() => {
         formRef.current.setFieldError('autocomplete', 'Field Invalid');
      }, []);

      return (
         <div className="m-4">
            <Form onSubmit={() => {}} ref={formRef}>
               <InputAutoComplete
                  fetch={fetchGroupMock}
                  name="autocomplete"
                  title="Autocomplete"
                  getValueText={(v) => v.name}
                  renderInput={(item: any) => (
                     <div>
                        {item.title && <b>{item.name}</b>}
                        {!item.title && <>{item.name}</>}
                     </div>
                  )}
               />
            </Form>
         </div>
      );
   });
