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 { Autocomplete } from './Autocomplete';
import { IPropAutocompleteFetchResponse } from './Autocomplete.interface';

const css = styled.div;

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

const fetchGroupMock = (): Observable<IPropAutocompleteFetchResponse[]> =>
   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/AutoComplete', module)
   .add('default', () => {
      const [value, setValue] = useState('default text');
      console.log(value);

      return (
         <div className="m-4 max-input">
            <Autocomplete fetch={fetchGroupMock} title="Autocomplete" value={value} onInput={setValue} />
         </div>
      );
   })
   .add('with disabled items', () => (
      <div className="m-4 max-input">
         <Form onSubmit={() => {}}>
            <Autocomplete
               fetch={fetchGroupMock}
               name="autocomplete"
               title="Autocomplete"
               onSelect={(i) => {
                  return i.name;
               }}
               renderInput={(item: any) => (
                  <div>
                     {item.title && <b>{item.name}</b>}
                     {!item.title && <>{item.name}</>}
                  </div>
               )}
            />
         </Form>
      </div>
   ))
   .add('with cleanAfterSelect', () => (
      <div className="m-4 max-input">
         <Form onSubmit={() => {}}>
            <Autocomplete
               fetch={fetchGroupMock}
               name="autocomplete"
               title="Autocomplete"
               onSelect={(i) => {
                  console.log(i);
               }}
               cleanAfterSelect
               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 max-input">
            <Form onSubmit={() => {}} initialData={{ default: '10000' }} ref={formRef}>
               <Autocomplete
                  fetch={fetchGroupMock}
                  name="autocomplete"
                  title="Autocomplete"
                  onSelect={(i) => {
                     console.log(i);
                  }}
                  renderInput={(item: any) => (
                     <div>
                        {item.title && <b>{item.name}</b>}
                        {!item.title && <>{item.name}</>}
                     </div>
                  )}
               />
            </Form>
         </div>
      );
   })

   .add('unform - default', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Autocomplete
                     fetch={fetchSimpleMock}
                     title="Autocomplete"
                     onSelect={(i) => {
                        return i;
                     }}
                     renderInput={(item: any) => <div>{item}</div>}
                  />
               </div>
            </div>
         </Style>
      );
   })
   .add('default with state', () => {
      const [value, setValue] = useState('default text');

      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Autocomplete
                     fetch={fetchSimpleMock}
                     title="Autocomplete"
                     onSelect={(i) => {
                        return i;
                     }}
                     renderInput={(item: any) => <div>{item}</div>}
                     onInput={setValue}
                     value={value}
                  />
               </div>
            </div>
         </Style>
      );
   })
   .add('prefix with JSX', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Autocomplete
                     fetch={fetchSimpleMock}
                     title="Autocomplete"
                     onSelect={(i) => {
                        return i;
                     }}
                     renderInput={(item: any) => <div>{item}</div>}
                     prefix={<FontAwesomeIcon icon={faUser} />}
                  />
               </div>
            </div>
         </Style>
      );
   })
   .add('prefix with text', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Autocomplete
                     fetch={fetchSimpleMock}
                     title="Autocomplete"
                     onSelect={(i) => {
                        return i;
                     }}
                     renderInput={(item: any) => <div>{item}</div>}
                     prefix="R$"
                  />
               </div>
            </div>
         </Style>
      );
   })
   .add('suffix with JSX', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Autocomplete
                     fetch={fetchSimpleMock}
                     title="Autocomplete"
                     onSelect={(i) => {
                        return i;
                     }}
                     renderInput={(item: any) => <div>{item}</div>}
                     suffix={<FontAwesomeIcon icon={faSearch} />}
                  />
               </div>
            </div>
         </Style>
      );
   })
   .add('suffix with text', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Autocomplete
                     fetch={fetchSimpleMock}
                     title="Autocomplete"
                     onSelect={(i) => {
                        return i;
                     }}
                     renderInput={(item: any) => <div>{item}</div>}
                     suffix="m³"
                  />
               </div>
            </div>
         </Style>
      );
   })
   .add('suffix with loading', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Autocomplete
                     fetch={fetchSimpleMock}
                     title="Autocomplete"
                     onSelect={(i) => {
                        return i;
                     }}
                     renderInput={(item: any) => <div>{item}</div>}
                     loading
                  />
               </div>
            </div>
         </Style>
      );
   })
   .add('title', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Autocomplete
                     fetch={fetchSimpleMock}
                     title="Autocomplete"
                     onSelect={(i) => {
                        return i;
                     }}
                     renderInput={(item: any) => <div>{item}</div>}
                  />
               </div>
            </div>
         </Style>
      );
   })
   .add('textRight', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Autocomplete
                     fetch={fetchSimpleMock}
                     title="Autocomplete"
                     onSelect={(i) => {
                        return i;
                     }}
                     renderInput={(item: any) => <div>{item}</div>}
                     textRight
                     value="Text Right"
                  />
               </div>
            </div>
         </Style>
      );
   })
   .add('with number', () => {
      const [value, setValue] = useState(100.1023);
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Autocomplete
                     fetch={fetchSimpleMock}
                     title="Autocomplete"
                     onSelect={(i) => {
                        return i;
                     }}
                     renderInput={(item: any) => <div>{item}</div>}
                     mask="number"
                     value={value}
                     onInput={setValue}
                  />
               </div>
            </div>
         </Style>
      );
   })
   .add('with number decimals', () => {
      const [value, setValue] = useState('10000');
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Autocomplete
                     fetch={fetchSimpleMock}
                     title="Autocomplete"
                     onSelect={(i) => {
                        return i;
                     }}
                     renderInput={(item: any) => <div>{item}</div>}
                     mask="number"
                     decimals={4}
                     value={value}
                     onInput={setValue}
                  />
               </div>
            </div>
         </Style>
      );
   })
   .add('with CEP', () => {
      const [value, setValue] = useState('08871220');

      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Autocomplete
                     fetch={fetchSimpleMock}
                     title="Autocomplete"
                     onSelect={(i) => {
                        return i;
                     }}
                     renderInput={(item: any) => <div>{item}</div>}
                     mask="CEP"
                     value={value}
                     onInput={setValue}
                  />
               </div>
            </div>
         </Style>
      );
   })
   .add('with CNPJ', () => {
      const [value, setValue] = useState('26576255000191');

      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Autocomplete
                     fetch={fetchSimpleMock}
                     title="Autocomplete"
                     onSelect={(i) => {
                        return i;
                     }}
                     renderInput={(item: any) => <div>{item}</div>}
                     mask="CNPJ"
                     value={value}
                     onInput={setValue}
                  />
               </div>
            </div>
         </Style>
      );
   })
   .add('with CPF', () => {
      const [value, setValue] = useState('26576255000191');

      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Autocomplete
                     fetch={fetchSimpleMock}
                     title="Autocomplete"
                     onSelect={(i) => {
                        return i;
                     }}
                     renderInput={(item: any) => <div>{item}</div>}
                     mask="CPF"
                     value={value}
                     onInput={setValue}
                  />
               </div>
            </div>
         </Style>
      );
   })
   .add('with RG', () => {
      const [value, setValue] = useState('461273317');

      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Autocomplete
                     fetch={fetchSimpleMock}
                     title="Autocomplete"
                     onSelect={(i) => {
                        return i;
                     }}
                     renderInput={(item: any) => <div>{item}</div>}
                     mask="RG"
                     value={value}
                     onInput={setValue}
                  />
               </div>
            </div>
         </Style>
      );
   })
   .add('with phone', () => {
      const [value, setValue] = useState('1188881234');
      const [value2, setValue2] = useState('11988881234');

      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Autocomplete
                     fetch={fetchSimpleMock}
                     title="Autocomplete"
                     onSelect={(i) => {
                        return i;
                     }}
                     renderInput={(item: any) => <div>{item}</div>}
                     mask="phone"
                     value={value}
                     onInput={setValue}
                  />
                  <Autocomplete
                     fetch={fetchSimpleMock}
                     title="Autocomplete"
                     onSelect={(i) => {
                        return i;
                     }}
                     renderInput={(item: any) => <div>{item}</div>}
                     mask="phone"
                     value={value2}
                     onInput={setValue2}
                  />
               </div>
            </div>
         </Style>
      );
   })
   .add('with password', () => {
      const [value, setValue] = useState('1188881234');

      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Autocomplete
                     fetch={fetchSimpleMock}
                     title="Autocomplete"
                     onSelect={(i) => {
                        return i;
                     }}
                     renderInput={(item: any) => <div>{item}</div>}
                     mask="phone"
                     value={value}
                     onInput={setValue}
                     password
                  />
               </div>
            </div>
         </Style>
      );
   })
   .add('no spaces', () => {
      const [value, setValue] = useState(' email @simple. com. br');

      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Autocomplete
                     fetch={fetchSimpleMock}
                     title="Autocomplete"
                     onSelect={(i) => {
                        return i;
                     }}
                     renderInput={(item: any) => <div>{item}</div>}
                     mask="no-spaces"
                     value={value}
                     onInput={setValue}
                  />
               </div>
            </div>
         </Style>
      );
   })
   .add('with type hidden', () => {
      const [value, setValue] = useState('10000');
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Autocomplete
                     fetch={fetchSimpleMock}
                     title="Autocomplete"
                     onSelect={(i) => {
                        return i;
                     }}
                     renderInput={(item: any) => <div>{item}</div>}
                     mask="number"
                     value={value}
                     onInput={setValue}
                     type="hidden"
                  />
               </div>
            </div>
         </Style>
      );
   })
   .add('unform - with error', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Autocomplete
                     fetch={fetchSimpleMock}
                     title="Autocomplete"
                     onSelect={(i) => {
                        return i;
                     }}
                     renderInput={(item: any) => <div>{item}</div>}
                     error="field invalid"
                  />
               </div>
            </div>
         </Style>
      );
   })
   .add('unform - default', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}}>
                     <Autocomplete
                        fetch={fetchSimpleMock}
                        title="Autocomplete"
                        renderInput={(item: any) => <div>{item}</div>}
                     />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('unform - with number', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}} initialData={{ default: '10000' }}>
                     <Autocomplete
                        fetch={fetchSimpleMock}
                        title="Autocomplete"
                        onSelect={(i) => {
                           return i;
                        }}
                        renderInput={(item: any) => <div>{item}</div>}
                        mask="number"
                        name="default"
                     />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('unform - with number decimals', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}} initialData={{ default: '10000' }}>
                     <Autocomplete
                        fetch={fetchSimpleMock}
                        title="Autocomplete"
                        onSelect={(i) => {
                           return i;
                        }}
                        renderInput={(item: any) => <div>{item}</div>}
                        mask="number"
                        decimals={4}
                        name="default"
                     />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('unform - with CEP', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}} initialData={{ default: '08871220' }}>
                     <Autocomplete
                        fetch={fetchSimpleMock}
                        title="Autocomplete"
                        onSelect={(i) => {
                           return i;
                        }}
                        renderInput={(item: any) => <div>{item}</div>}
                        mask="CEP"
                        name="default"
                     />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('unform - with CNPJ', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}} initialData={{ default: '26576255000191' }}>
                     <Autocomplete
                        fetch={fetchSimpleMock}
                        title="Autocomplete"
                        onSelect={(i) => {
                           return i;
                        }}
                        renderInput={(item: any) => <div>{item}</div>}
                        mask="CNPJ"
                        name="default"
                     />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('unform - with CPF', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}} initialData={{ default: '26576255000191' }}>
                     <Autocomplete
                        fetch={fetchSimpleMock}
                        title="Autocomplete"
                        onSelect={(i) => {
                           return i;
                        }}
                        renderInput={(item: any) => <div>{item}</div>}
                        mask="CPF"
                        name="default"
                     />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('unform - with RG', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}} initialData={{ default: '461273317' }}>
                     <Autocomplete
                        fetch={fetchSimpleMock}
                        title="Autocomplete"
                        onSelect={(i) => {
                           return i;
                        }}
                        renderInput={(item: any) => <div>{item}</div>}
                        mask="RG"
                        name="default"
                     />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('unform - with phone', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}} initialData={{ default: '1188881234', number11Digits: '11988881234' }}>
                     <Autocomplete
                        fetch={fetchSimpleMock}
                        title="Autocomplete"
                        onSelect={(i) => {
                           return i;
                        }}
                        renderInput={(item: any) => <div>{item}</div>}
                        mask="phone"
                        name="default"
                     />
                     <Autocomplete
                        fetch={fetchSimpleMock}
                        title="Autocomplete"
                        onSelect={(i) => {
                           return i;
                        }}
                        renderInput={(item: any) => <div>{item}</div>}
                        mask="phone"
                        name="number11Digits"
                     />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('unform - no spaces', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}} initialData={{ default: ' email @simple. com. br' }}>
                     <Autocomplete
                        fetch={fetchSimpleMock}
                        title="Autocomplete"
                        onSelect={(i) => {
                           return i;
                        }}
                        renderInput={(item: any) => <div>{item}</div>}
                        mask="no-spaces"
                        name="default"
                     />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('unform - with error', () => {
      const formRef = useRef<FormHandles>();

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

      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}} initialData={{ default: '10000' }} ref={formRef}>
                     <Autocomplete
                        fetch={fetchSimpleMock}
                        title="Autocomplete"
                        onSelect={(i) => {
                           return i;
                        }}
                        renderInput={(item: any) => <div>{item}</div>}
                        name="default"
                        number
                        decimals={2}
                     />
                  </Form>
               </div>
            </div>
         </Style>
      );
   });
