import React, { useEffect, useRef, useState } from 'react';
import { View, Button } from 'react-native';
import { storiesOf } from '@storybook/react-native';
import { Observable } from 'rxjs';
import { TextNative } from '../TextNative';
import { DatepickerFullscreen } from './DatepickerFullscreen';

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 fetchMockNotFound = (): Observable<any> =>
   new Observable((observable) => {
      setTimeout(() => {
         observable.next([]);
         observable.complete();
         observable.unsubscribe();
      }, 100);
   });

const fetchMockError = (): Observable<any> =>
   new Observable((observable) => {
      setTimeout(() => {
         observable.error();
         observable.complete();
         observable.unsubscribe();
      }, 100);
   });

storiesOf('DatepickerFullscreen', module).add('default', () => {
   function Stub(): any {
      const [openModal, setOpenModal] = useState(false);

      function onClose(): void {
         setOpenModal(false);
      }

      return (
         <View style={{ flex: 1, padding: 20 }}>
            <Button title="Open auto complete" onPress={() => setOpenModal(true)} />

            <DatepickerFullscreen />
         </View>
      );
   }

   return <Stub />;
});
