import React, { useCallback, useMemo, useState } from 'react';
import { View, StatusBar } from 'react-native';
import { Router, Switch } from 'react-router-dom';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { storiesOf } from '@storybook/react-native';
import { useSelectGroup } from '../../../hooks/useSelectGroup/index';
import { useViewList } from '../../../hooks/useViewList';
import { CreateRange, deleteEmpty } from '../../../services';
import { AppProvider } from '../../AppProvider';
import { IPropsNavActions } from '../../NavActions/NavActions.interface';
import { IPropsTabs, ITab } from '../../Tabs/Tabs.interface';
import { IPropsTagFilter } from '../../TagsFilters/TagsFilters.interface';
import {
   Card,
   Filters,
   resolveItems,
   resolveNotFound,
   resolveError,
   resolveManyItems,
   resolveManyItemsError,
} from './__mocks__/index';
import { PageListing } from './PageListing';

const Stack = createStackNavigator();

storiesOf('Components/PageListing', module)
   .add('default', () => {
      function Component(): any {
         const viewList = useViewList({
            filtersDefault: {
               name: 'John',
            },
            infiniteScroll: true,
            resolves: {
               items: resolveItems,
            },
         });

         const { setFilters } = viewList;

         const tabs: IPropsTabs = useMemo(
            () => ({
               options: [
                  {
                     id: 1,
                     name: 'AAA',
                  },
                  {
                     id: 2,
                     name: 'BBB',
                  },
               ],
               onSelect: (tab: ITab) => {},
            }),
            [],
         );

         const tagsFilters: Partial<IPropsTagFilter> = {
            filtersSchema: {
               name: {},
               location: {},
               address: {},
               price: {},
            },
            removeTag: (key: string, value: any) => {
               setFilters((draft) => {
                  draft[key] = value;
                  draft.offset = 0;
                  draft = deleteEmpty(draft);
               });
            },
         };

         const [onSelect, onUnselectAll, selected, isSelected] = useSelectGroup();

         const navActions: IPropsNavActions = {
            actions: [
               {
                  id: 'star',
                  item: <View />, // <i className="fas fa-star" />,
                  onPress: () => {},
               },
               {
                  id: 'unstar',
                  item: <View />, // <i className="far fa-star" />,
                  onPress: () => {},
               },
               {
                  id: 'delete',
                  item: <View />, // <i className="far fa-trash-alt" />,
                  onPress: () => {},
               },
            ],
            selected: selected.size,
            onUnselectAll,
         };

         const onSelectCard = useCallback(function onSelectCard(resource: any): void {
            onSelect(resource.id, !isSelected(resource.id));
         }, []);

         const renderResourceSkeleton = useCallback((resource, i) => <Card property={resource} skeleton />, []);
         const renderResource = useCallback(
            (resource, i) => <Card property={resource} onSelect={onSelectCard} selected={isSelected(resource.id)} />,
            [],
         );

         // return <RecycleTestComponent />;
         const [data] = useState(CreateRange(1000));
         const keyExtractorSkeleton = useCallback((item: any, index: number) => `card-skeleton-${index}`, []);

         // return <CustomFlatList renderItem={renderResource} data={data} keyExtractor={keyExtractorSkeleton} />;

         return (
            <PageListing
               viewList={viewList}
               tabs={tabs}
               textResourceSingular="imóvel"
               textResourcePlural="imóveis"
               navActions={navActions}
               tagsFilters={tagsFilters}
               FiltersComponent={Filters}
               renderResourceSkeleton={renderResourceSkeleton}
               renderResource={renderResource}
            />
         );
      }

      return (
         <AppProvider initialData={{}}>
            <NavigationContainer>
               <Stack.Navigator headerMode="none" initialRouteName="HomeScreen">
                  <Stack.Screen name="HomeScreen" component={Component} />
               </Stack.Navigator>
            </NavigationContainer>
         </AppProvider>
      );
   })
   .add('not found', () => {
      function Component(): any {
         const viewList = useViewList({
            infiniteScroll: true,
            resolves: {
               items: resolveNotFound,
            },
         });

         const { setFilters } = viewList;

         const tabs: IPropsTabs = {
            options: [
               {
                  id: 1,
                  name: 'AAA',
               },
               {
                  id: 2,
                  name: 'BBB',
               },
            ],
            onSelect: (tab: ITab) => {},
         };

         const [onSelect, onUnselectAll, selected, isSelected] = useSelectGroup();

         function onSelectCard(resource: any): void {
            onSelect(resource.id, !isSelected(resource.id));
         }

         return (
            <PageListing
               viewList={viewList}
               tabs={tabs}
               textResourceSingular="imóvel"
               textResourcePlural="imóveis"
               FiltersComponent={Filters}
               renderResourceSkeleton={(resource, i) => <Card property={resource} skeleton />}
               renderResource={(resource, i) => (
                  <Card property={resource} onSelect={onSelectCard} selected={isSelected(resource.id)} />
               )}
            />
         );
      }

      return (
         <AppProvider initialData={{}}>
            <NavigationContainer>
               <Stack.Navigator headerMode="none">
                  <Stack.Screen name="HomeScreen" component={Component} />
               </Stack.Navigator>
               <StatusBar backgroundColor="#000" />
            </NavigationContainer>
         </AppProvider>
      );
   })
   .add('error first load', () => {
      function Component(): any {
         const viewList = useViewList({
            infiniteScroll: true,
            resolves: {
               items: resolveError,
            },
         });

         const { setFilters } = viewList;

         const tabs: IPropsTabs = {
            options: [
               {
                  id: 1,
                  name: 'AAA',
               },
               {
                  id: 2,
                  name: 'BBB',
               },
            ],
            onSelect: (tab: ITab) => {},
         };

         const [onSelect, onUnselectAll, selected, isSelected] = useSelectGroup();

         function onSelectCard(resource: any): void {
            onSelect(resource.id, !isSelected(resource.id));
         }

         return (
            <PageListing
               viewList={viewList}
               tabs={tabs}
               textResourceSingular="imóvel"
               textResourcePlural="imóveis"
               FiltersComponent={Filters}
               renderResourceSkeleton={(resource, i) => <Card property={resource} skeleton />}
               renderResource={(resource, i) => (
                  <Card property={resource} onSelect={onSelectCard} selected={isSelected(resource.id)} />
               )}
            />
         );
      }

      return (
         <AppProvider initialData={{}}>
            <NavigationContainer>
               <Stack.Navigator headerMode="none">
                  <Stack.Screen name="HomeScreen" component={Component} />
               </Stack.Navigator>
               <StatusBar backgroundColor="#000" />
            </NavigationContainer>
         </AppProvider>
      );
   })
   .add('load more items', () => {
      function Component(): any {
         const viewList = useViewList({
            infiniteScroll: true,
            resolves: {
               items: resolveManyItems,
            },
            infiniteScroll: true,
         });

         const tabs: IPropsTabs = {
            options: [
               {
                  id: 1,
                  name: 'AAA',
               },
               {
                  id: 2,
                  name: 'BBB',
               },
            ],
            onSelect: (tab: ITab) => {},
         };

         const [onSelect, onUnselectAll, selected, isSelected] = useSelectGroup();

         function onSelectCard(resource: any): void {
            onSelect(resource.id, !isSelected(resource.id));
         }

         return (
            <PageListing
               viewList={viewList}
               tabs={tabs}
               textResourceSingular="imóvel"
               textResourcePlural="imóveis"
               FiltersComponent={Filters}
               renderResourceSkeleton={(resource, i) => <Card property={resource} skeleton />}
               renderResource={(resource, i) => <Card property={resource} />}
            />
         );
      }

      return (
         <AppProvider initialData={{}}>
            <NavigationContainer>
               <Stack.Navigator headerMode="none">
                  <Stack.Screen name="HomeScreen" component={Component} />
               </Stack.Navigator>
               <StatusBar backgroundColor="#000" />
            </NavigationContainer>
         </AppProvider>
      );
   })
   .add('load more items error', () => {
      function Component(): any {
         const viewList = useViewList({
            infiniteScroll: true,
            resolves: {
               items: resolveManyItemsError,
            },
         });

         const tabs: IPropsTabs = {
            options: [
               {
                  id: 1,
                  name: 'AAA',
               },
               {
                  id: 2,
                  name: 'BBB',
               },
            ],
            onSelect: (tab: ITab) => {},
         };

         const [onSelect, onUnselectAll, selected, isSelected] = useSelectGroup();

         function onSelectCard(resource: any): void {
            onSelect(resource.id, !isSelected(resource.id));
         }

         return (
            <PageListing
               viewList={viewList}
               tabs={tabs}
               textResourceSingular="imóvel"
               textResourcePlural="imóveis"
               FiltersComponent={Filters}
               renderResourceSkeleton={(resource, i) => <Card property={resource} skeleton />}
               renderResource={(resource, i) => <Card property={resource} />}
            />
         );
      }

      return (
         <AppProvider initialData={{}}>
            <NavigationContainer>
               <Stack.Navigator headerMode="none">
                  <Stack.Screen name="HomeScreen" component={Component} />
               </Stack.Navigator>
               <StatusBar backgroundColor="#000" />
            </NavigationContainer>
         </AppProvider>
      );
   });
