import React from 'react';
import { Router, Switch } from 'react-router-dom';
import { AppProvider } from '../../../AppProvider';
import { useSelectGroup } from '../../../../hooks/useSelectGroup';
import { useViewList } from '../../../../hooks/useViewList';
import { deleteEmpty, Resolve } from '../../../../services';
import { IPropsNavActions } from '../../../NavActions';
import { IPropsTabs, ITab } from '../../../Tabs/Tabs.interface';
import { IPropsTagFilter } from '../../../TagsFilters/TagsFilters.interface';
import { PageListing } from '../PageListing';
import { Card, Filters, history, MockPageListingStyle } from './index';
import { Observable } from 'rxjs';
import PropertyImage1 from './images/property1.jpg';
import PropertyImage2 from './images/property2.jpg';
import PropertyImage3 from './images/property3.jpg';
import PropertyImage4 from './images/property4.jpg';
import PropertyImage5 from './images/property5.jpg';
import PropertyImage6 from './images/property6.jpg';

export const resolveItems: Resolve<any> = (params: any) =>
   new Observable((subscriber) => {
      setTimeout(() => {
         subscriber.next({
            results: [
               {
                  id: parseInt((params?.offset || 0) as any, 10) + 1,
                  image: PropertyImage1,
               },
               {
                  id: parseInt((params?.offset || 0) as any, 10) + 2,
                  image: PropertyImage2,
               },
               {
                  id: parseInt((params?.offset || 0) as any, 10) + 3,
                  image: PropertyImage3,
               },
               {
                  id: parseInt((params?.offset || 0) as any, 10) + 4,
                  image: PropertyImage4,
               },
               {
                  id: parseInt((params?.offset || 0) as any, 10) + 5,
                  image: PropertyImage5,
               },
               {
                  id: parseInt((params?.offset || 0) as any, 10) + 6,
                  image: PropertyImage6,
               },
            ],
            count: 30,
         });
         subscriber.complete();
         subscriber.unsubscribe();
      }, 1);
   });

export const resolveNotFound: Resolve<any> = (params: any) =>
   new Observable((subscriber) => {
      setTimeout(() => {
         subscriber.next({
            results: [],
            count: 0,
         });
         subscriber.complete();
         subscriber.unsubscribe();
      }, 1);
   });

export const resolveError: Resolve<any> = (params: any) =>
   new Observable((subscriber) => {
      setTimeout(() => {
         subscriber.error({});
         subscriber.complete();
         subscriber.unsubscribe();
      }, 1);
   });

export function PageListingRealWordMock(): any {
   function Component(): any {
      const viewList = useViewList({
         filtersDefault: {
            name: 'John',
         },
         resolves: {
            items: resolveItems,
         },
      });

      const { setFilters } = viewList;

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

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

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

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

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

      return (
         <PageListing
            viewList={viewList}
            tabs={tabs}
            navActions={navActions}
            tagsFilters={tagsFilters}
            FiltersComponent={Filters}
            renderResourceSkeleton={(resource, i) => <Card property={resource} skeleton />}
            renderResource={(resource, i) => (
               <Card property={resource} onSelect={onSelectCard} selected={isSelected(resource.id)} />
            )}
         />
      );
   }

   return (
      <MockPageListingStyle>
         <AppProvider initialData={{ history }}>
            <Router history={history}>
               <Switch>
                  <Component />
               </Switch>
            </Router>
         </AppProvider>
      </MockPageListingStyle>
   );
}

export function PageListingRealWordMockNotFound(): any {
   function Component(): any {
      const viewList = useViewList({
         filtersDefault: {
            name: 'John',
         },
         resolves: {
            items: resolveNotFound,
         },
      });

      const { setFilters } = viewList;

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

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

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

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

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

      return (
         <PageListing
            viewList={viewList}
            tabs={tabs}
            navActions={navActions}
            tagsFilters={tagsFilters}
            FiltersComponent={Filters}
            renderResourceSkeleton={(resource, i) => <Card property={resource} skeleton />}
            renderResource={(resource, i) => (
               <Card property={resource} onSelect={onSelectCard} selected={isSelected(resource.id)} />
            )}
         />
      );
   }

   return (
      <MockPageListingStyle>
         <AppProvider initialData={{ history }}>
            <Router history={history}>
               <Switch>
                  <Component />
               </Switch>
            </Router>
         </AppProvider>
      </MockPageListingStyle>
   );
}

export function PageListingRealWordMockError(): any {
   function Component(): any {
      const viewList = useViewList({
         filtersDefault: {
            name: 'John',
         },
         resolves: {
            items: resolveError,
         },
      });

      const { setFilters } = viewList;

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

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

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

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

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

      return (
         <PageListing
            viewList={viewList}
            tabs={tabs}
            navActions={navActions}
            tagsFilters={tagsFilters}
            FiltersComponent={Filters}
            renderResourceSkeleton={(resource, i) => <Card property={resource} skeleton />}
            renderResource={(resource, i) => (
               <Card property={resource} onSelect={onSelectCard} selected={isSelected(resource.id)} />
            )}
         />
      );
   }

   return (
      <MockPageListingStyle>
         <AppProvider initialData={{ history }}>
            <Router history={history}>
               <Switch>
                  <Component />
               </Switch>
            </Router>
         </AppProvider>
      </MockPageListingStyle>
   );
}
