import React from 'react';
import { Router, Switch } from 'react-router-dom';
import { storiesOf } from '@storybook/react';
import { useSelectGroup } from '../../../hooks/useSelectGroup/index';
import { useViewList } from '../../../hooks/useViewList';
import { deleteEmpty } from '../../../services';
import { AppProvider } from '../../AppProvider';
import { IActionsOptions, IPropsNavActions } from '../../NavActions';
import { IPropsTabs, ITab } from '../../Tabs/Tabs.interface';
import { IPropsTagFilter } from '../../TagsFilters/TagsFilters.interface';
import imagePageError from './__mocks__/images/connection-lost.png';
import imageNotFound from './__mocks__/images/notfound.png';
import {
   Card,
   Filters,
   resolveItems,
   MockPageListingStyle,
   resolveError,
   resolveNotFound,
   history,
} from './__mocks__/index';
import { PageListing } from './PageListing';

storiesOf('Components/PageListing', module)
   .add('default', () => {
      function Component() {
         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>
      );
   })
   .add('listing error', () => {
      const viewList = useViewList({
         filtersDefault: {
            name: 'John',
         },
         resolves: {
            items: resolveError,
         },
      });

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

      const tagsFilters: Partial<IPropsTagFilter> = {
         filtersSchema: {
            name: {},
         },
         removeTag: (key: string, value: any) => {},
      };

      return (
         <MockPageListingStyle>
            <AppProvider initialData={{ imagePageError }}>
               <PageListing
                  viewList={viewList}
                  tabs={tabs}
                  tagsFilters={tagsFilters}
                  FiltersComponent={Filters}
                  renderResourceSkeleton={(resource, i) => <Card property={resource} skeleton />}
                  renderResource={(resource, i) => <Card property={resource} />}
               />
            </AppProvider>
         </MockPageListingStyle>
      );
   })
   .add('not found', () => {
      const viewList = useViewList({
         filtersDefault: {
            name: 'John',
         },
         resolves: {
            items: resolveNotFound,
         },
      });

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

      const tagsFilters: Partial<IPropsTagFilter> = {
         filtersSchema: {
            name: {},
         },
         removeTag: (key: string, value: any) => {},
      };

      return (
         <MockPageListingStyle>
            <AppProvider initialData={{ imagePageError, imageNotFound }}>
               <PageListing
                  viewList={viewList}
                  tabs={tabs}
                  tagsFilters={tagsFilters}
                  FiltersComponent={Filters}
                  renderResourceSkeleton={(resource, i) => <Card property={resource} skeleton />}
                  renderResource={(resource, i) => <Card property={resource} />}
               />
            </AppProvider>
         </MockPageListingStyle>
      );
   });
