import React, { useEffect, useRef, useState } from 'react';
import { faSearch, faUser } from '@fortawesome/free-solid-svg-icons';
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 { InputTags } from './InputTags';
import { IPropAutocompleteFetchResponse } from './InputTags.interface';

const css = styled.div;

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

const fetchGroupMock = (): Observable<IPropAutocompleteFetchResponse[]> =>
   new Observable((observable) => {
      setTimeout(() => {
         observable.next([
            { name: 'Mogi das cruzes', value: { id: 1, name: 'Mogi das cruzes' } },
            { name: 'Suzano', value: { id: 2, name: 'Suzano' } },
            { name: 'Vila Lana', value: { id: 3, name: 'Vila Lana' } },
            { name: 'Guarulhos', value: { id: 4, name: 'Guarulhos' } },
            { name: 'São Paulo', value: { id: 5, name: 'São Paulo' } },
         ]);
         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/InputTags', module).add('default', () => {
   const [value, setValue] = useState('default text');

   const [tags, setTags] = useState([
      {
         id: 2,
         name: 'Suzano',
      },
   ]);

   return (
      <div className="m-4 max-input">
         <Form
            onSubmit={(v) => console.log(v)}
            initialData={{
               tags: [
                  {
                     id: 2,
                     name: 'Suzano',
                  },
               ],
            }}
         >
            <InputTags
               name="tags"
               fetch={fetchGroupMock}
               // tags={tags}
               cleanAfterSelect
               // onSelect={(e, b) => {
               //    setTags((v) => {
               //       if (v.find((tag) => tag.id == b.value.id)) {
               //          const tmp = [...v];
               //          tmp.splice(
               //             v.findIndex((tag) => tag.id == b.value.id),
               //             1,
               //          );
               //          return tmp;
               //       }
               //       return [...v, b.value];
               //    });
               // }}
            />

            <button data-testid="submit" type="submit">
               Submit
            </button>
         </Form>
      </div>
   );
});
