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 { AutocompleteFullscreen } from './AutocompleteFullscreen';

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('AutocompleteFullscreen', 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)} />

               <AutocompleteFullscreen
                  show={openModal}
                  fetch={fetchGroupMock}
                  name="autocomplete"
                  title="Autocomplete"
                  onSelect={(i) => {
                     console.log(i);
                  }}
                  onClose={onClose}
                  renderInput={(item: any) => (
                     <View style={{ paddingVertical: 10, paddingHorizontal: 25 }}>
                        <TextNative color={item.title ? '#999' : null}>{item.name}</TextNative>
                     </View>
                  )}
                  initialValue={[
                     { 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' },
                  ]}
               />
            </View>
         );
      }

      return <Stub />;
   })
   .add('not found', () => {
      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)} />

               <AutocompleteFullscreen
                  show={openModal}
                  fetch={fetchMockNotFound}
                  name="autocomplete"
                  title="Autocomplete"
                  onSelect={(i) => {
                     console.log(i);
                  }}
                  onClose={onClose}
                  renderInput={(item: any) => (
                     <View style={{ paddingVertical: 10, paddingHorizontal: 25 }}>
                        <TextNative color={item.title ? '#999' : null}>{item.name}</TextNative>
                     </View>
                  )}
               />
            </View>
         );
      }

      return <Stub />;
   })
   .add('request error', () => {
      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)} />

               <AutocompleteFullscreen
                  show={openModal}
                  fetch={fetchMockError}
                  name="autocomplete"
                  title="Autocomplete"
                  onSelect={(i) => {
                     console.log(i);
                  }}
                  onClose={onClose}
                  renderInput={(item: any) => (
                     <View style={{ paddingVertical: 10, paddingHorizontal: 25 }}>
                        <TextNative color={item.title ? '#999' : null}>{item.name}</TextNative>
                     </View>
                  )}
               />
            </View>
         );
      }

      return <Stub />;
   })
   .add('with multiselection', () => {
      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)} />

               <AutocompleteFullscreen
                  show={openModal}
                  fetch={fetchGroupMock}
                  name="autocomplete"
                  title="Autocomplete"
                  onSelect={(result) => {
                     console.log(result);
                  }}
                  multiSelection
                  onClose={onClose}
                  renderItemSelected={(item: any) => (
                     <View
                        style={{
                           margin: 5,
                           paddingVertical: 10,
                           paddingHorizontal: 15,
                           backgroundColor: 'black',
                           borderRadius: 200,
                        }}
                     >
                        <TextNative color="white" size={14}>
                           {item.name}
                        </TextNative>
                     </View>
                  )}
                  renderInput={(item: any, checked: boolean) => (
                     <View
                        style={{
                           paddingVertical: 10,
                           paddingHorizontal: 25,
                           backgroundColor: checked ? 'rgba(0,250,0,0.1)' : null,
                        }}
                     >
                        <TextNative color={item.title ? '#999' : null}>{item.name}</TextNative>
                     </View>
                  )}
                  initialValue={[
                     { disabled: true, name: 'Bairro', title: true },
                     { id: 1, name: 'Mogi das cruzes' },
                     { id: 2, name: 'Suzano' },
                     { disabled: true, name: 'Cidade', title: true },
                     { id: 3, name: 'São Paulo' },
                     { id: 4, name: 'Suzano' },
                     { id: 5, name: 'Guarulhos' },
                  ]}
               />
            </View>
         );
      }

      return <Stub />;
   })
   .add('with multiselection initial select', () => {
      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)} />

               <AutocompleteFullscreen
                  show={openModal}
                  fetch={fetchGroupMock}
                  name="autocomplete"
                  title="Autocomplete"
                  onSelect={(result) => {
                     console.log(result);
                  }}
                  multiSelection
                  onClose={onClose}
                  renderItemSelected={(item: any) => (
                     <View
                        style={{
                           margin: 5,
                           paddingVertical: 10,
                           paddingHorizontal: 15,
                           backgroundColor: 'black',
                           borderRadius: 200,
                        }}
                     >
                        <TextNative color="white" size={14}>
                           {item.name}
                        </TextNative>
                     </View>
                  )}
                  renderInput={(item: any, checked: boolean) => (
                     <View
                        style={{
                           paddingVertical: 10,
                           paddingHorizontal: 25,
                           backgroundColor: checked ? 'rgba(0,250,0,0.1)' : null,
                        }}
                     >
                        <TextNative color={item.title ? '#999' : null}>{item.name}</TextNative>
                     </View>
                  )}
                  initialSelect={[
                     { id: 1, name: 'Mogi das cruzes' },
                     { id: 4, name: 'Suzano' },
                  ]}
                  initialValue={[
                     { disabled: true, name: 'Bairro', title: true },
                     { id: 1, name: 'Mogi das cruzes' },
                     { id: 2, name: 'Suzano' },
                     { disabled: true, name: 'Cidade', title: true },
                     { id: 3, name: 'São Paulo' },
                     { id: 4, name: 'Suzano' },
                     { id: 5, name: 'Guarulhos' },
                  ]}
               />
            </View>
         );
      }

      return <Stub />;
   })
