import React, { useEffect, useRef, useState } from 'react';
import { storiesOf } from '@storybook/react';
import { FormHandles } from '@unform/core';
import { Form } from '@unform/web';
import { Observable } from 'rxjs';
import { ISelectOption } from '../Select';
import { SelectAutocomplete } from './SelectAutocomplete';

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

storiesOf('Components/SelectAutocomplete', module)
   .add('with options array', () => (
      <div className="col-5 m-4">
         <Form onSubmit={() => {}}>
            <SelectAutocomplete
               options={[
                  { name: 'Eren asdasdadsasd asdasdasddsaasdasdasdasasdasd', value: 'Eren' },
                  { name: 'Levi', value: 'Levi' },
                  { name: 'Rainer', value: 'Rainer' },
                  { name: 'Falco', value: 'Falco' },
               ]}
               name="autocomplete"
               renderInput={(item: any) => <div>{item}</div>}
            />
         </Form>
      </div>
   ))
   .add('with options object value', () => {
      const [value, setValue] = useState();

      return (
         <div className="col-5 m-4">
            {/* <Form onSubmit={() => {}}> */}
            <SelectAutocomplete
               options={[
                  { value: { id: 'M' }, name: 'Male' },
                  { value: { id: 'F' }, name: 'Female' },
                  { value: { id: 'D' }, name: 'Disabled' },
               ]}
               placeHolder="Selecione..."
               value={value}
               onSelect={setValue}
               renderInput={(name: string, option: ISelectOption) => <div>{name}</div>}
            />
            {/* </Form> */}
         </div>
      );
   })
   .add('options with object', () => (
      <div className="col-5 m-4">
         <Form onSubmit={() => {}}>
            <SelectAutocomplete
               options={[
                  { name: 'Eren asdasdadsasd asdasdasddsaasdasdasdasasdasd', value: 'Eren' },
                  { name: 'Levi', value: 'Levi' },
                  { name: 'Rainer', value: 'Rainer' },
                  { name: 'Falco', value: 'Falco' },
               ]}
               name="autocomplete"
               renderInput={(item: any) => <div>{item}</div>}
            />
         </Form>
      </div>
   ))
   .add('with fetch', () => (
      <div className="col-5 m-4">
         <Form onSubmit={() => {}}>
            <SelectAutocomplete
               fetch={fetchGroupMock}
               name="autocomplete"
               renderInput={(item: any) => (
                  <div>
                     {item.title && <b>{item.name}</b>}
                     {!item.title && <>{item.name}</>}
                  </div>
               )}
            />
         </Form>
      </div>
   ))
   .add('with title', () => (
      <div className="col-5 m-4">
         <Form onSubmit={() => {}}>
            <SelectAutocomplete
               fetch={fetchGroupMock}
               name="autocomplete"
               title="Autocomplete"
               getValueText={(v) => v}
               renderInput={(item: any) => (
                  <div>
                     {item.title && <b>{item.name}</b>}
                     {!item.title && <>{item.name}</>}
                  </div>
               )}
            />
         </Form>
      </div>
   ))
   .add('with object fetch', () => (
      <div className="col-5 m-4">
         <Form onSubmit={() => {}}>
            <SelectAutocomplete
               fetch={fetchGroupMock}
               name="autocomplete"
               title="Autocomplete"
               getValue={(v) => v.name}
               renderInput={(item: any) => (
                  <div>
                     {item.title && <b>{item.name}</b>}
                     {!item.title && <>{item.name}</>}
                  </div>
               )}
            />
         </Form>
      </div>
   ))
   .add('with object value', () => (
      <div className="col-5 m-4">
         <Form onSubmit={() => {}} initialData={{ autocomplete: 'Suzano' }}>
            <SelectAutocomplete
               fetch={fetchGroupMock}
               name="autocomplete"
               title="Autocomplete"
               getValue={(v) => ({ label: v.name, value: v })}
               renderInput={(item: any) => (
                  <div>
                     {item.title && <b>{item.name}</b>}
                     {!item.title && <>{item.name}</>}
                  </div>
               )}
            />
         </Form>
      </div>
   ))
   .add('prefix with prefix', () => {
      return (
         <div className="col-5 m-4">
            <Form onSubmit={() => {}} initialData={{ autocomplete: 'Suzano' }}>
               <SelectAutocomplete
                  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('prefix with initial data', () => {
      return (
         <div className="col-5 m-4">
            <Form onSubmit={() => {}} initialData={{ autocomplete: 'Suzano' }}>
               <SelectAutocomplete
                  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 initial data object', () => {
      return (
         <div className="col-5 m-4">
            <Form
               onSubmit={() => {}}
               initialData={{ autocomplete: { label: 'Suzano', value: { id: 1, name: 'Suzano' } } }}
            >
               <SelectAutocomplete
                  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 error', () => {
      const formRef = useRef<FormHandles>();

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

      return (
         <div className="col-5 m-4">
            <Form onSubmit={() => {}} ref={formRef}>
               <SelectAutocomplete
                  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>
      );
   });
