import React from 'react';
import { storiesOf } from '@storybook/react';
import { Observable } from 'rxjs';
import { Autocomplete } from './Autocomplete';

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/AutoComplete', module)
   .add('default', () => (
      <div className="m-4">
         <Autocomplete
            fetch={fetchSimpleMock}
            name="autocomplete"
            title="Autocomplete"
            select={(i) => {
               console.log(i);
            }}
            renderInput={(item: any) => <div>{item}</div>}
         />
      </div>
   ))
   .add('with disabled items', () => (
      <div className="m-4">
         <Autocomplete
            fetch={fetchGroupMock}
            name="autocomplete"
            title="Autocomplete"
            select={(i) => {
               console.log(i);
            }}
            renderInput={(item: any) => (
               <div>
                  {item.title && <b>{item.name}</b>}
                  {!item.title && <>{item.name}</>}
               </div>
            )}
         />
      </div>
   ))
   .add('with error', () => (
      <div className="m-4">
         <Autocomplete
            fetch={fetchGroupMock}
            name="autocomplete"
            title="Autocomplete"
            select={(i) => {
               console.log(i);
            }}
            renderInput={(item: any) => (
               <div>
                  {item.title && <b>{item.name}</b>}
                  {!item.title && <>{item.name}</>}
               </div>
            )}
         />
      </div>
   ));

// renderInput={(params: any) => (
//     <div>
//         <div>{params.title ? <b>{params.name}</b> : params.name}</div>
//     </div>
// )}
