import React from 'react';
import { Router, Switch } from 'react-router-dom';
import { useViewList } from '@devesharp/react-hooks';
import { storiesOf } from '@storybook/react';
import { Pagination } from '../Pagination';
import { history, Filters, ResolveItems, Card, MockPageListingStyle, resolveError, resolveNotFound } from './__mocks__';

import { PageListing } from './PageListing';

storiesOf('Components/PageListing', module)
   .add('default style', () => {
      function Component(): any {
         const viewList = useViewList({
            resolves: {
               resources: ResolveItems,
            },
            ignoreQueryInFilters: ['id', 'viewMode', 'asdas'],
            history,
         });

         return (
            <MockPageListingStyle>
               <Router history={history}>
                  <Switch>
                     <div className="container">
                        <PageListing viewList={viewList}>
                           <PageListing.ScrollContainer>
                              <div className="header">
                                 <h2>Contacts</h2>
                              </div>

                              <div className="searching-container">
                                 <div className="col-filters">
                                    <div className="card">
                                       <PageListing.FiltersContainer filterComponent={Filters} />
                                    </div>
                                 </div>
                                 <div className="col-listing">
                                    <PageListing.TextResultCount />

                                    <PageListing.Context
                                       render={({ openFilters }) => <div onClick={openFilters}>Abrir Filter Modal</div>}
                                    />

                                    <PageListing.CardsContainer
                                       renderResource={(resource, i) => <Card resource={resource} />}
                                       renderResourceSkeleton={(resource, i) => <Card skeleton />}
                                    />

                                    <PageListing.Context
                                       render={({ resourcesTotal, limit, currentPage, setPage }) => (
                                          <Pagination
                                             total={resourcesTotal}
                                             perPage={limit}
                                             currentPage={currentPage}
                                             onChange={setPage}
                                          />
                                       )}
                                    />
                                 </div>
                              </div>
                           </PageListing.ScrollContainer>
                        </PageListing>
                     </div>
                  </Switch>
               </Router>
            </MockPageListingStyle>
         );
      }

      return <Component />;
   })
   .add('default', () => {
      function Component(): any {
         const viewList = useViewList({
            resolves: {
               resources: ResolveItems,
            },
            ignoreQueryInFilters: ['id', 'viewMode', 'asdas'],
            history,
         });

         return (
            <MockPageListingStyle>
               <Router history={history}>
                  <Switch>
                     <PageListing
                        viewList={viewList}
                        FiltersComponent={Filters}
                        title="Contacts"
                        tagsFilters={{
                           filtersSchema: {
                              id: {},
                              name: {},
                           },
                        }}
                        tabs={{
                           options: [
                              {
                                 id: 'contacts',
                                 name: 'Contatos (4289)',
                              },
                           ],
                           onSelect: () => {},
                        }}
                        sortOptions={[
                           {
                              value: '-id',
                              name: 'Ultimos adicioandos',
                           },
                           {
                              value: 'name',
                              name: 'Ordem Alfabética',
                           },
                        ]}
                        renderResource={(resource, i) => <Card resource={resource} />}
                        renderResourceSkeleton={(resource, i) => <Card skeleton />}
                     />
                  </Switch>
               </Router>
            </MockPageListingStyle>
         );
      }

      return <Component />;
   })
   .add('error on load', () => {
      function Component(): any {
         const viewList = useViewList({
            resolves: {
               resources: resolveError,
            },
            ignoreQueryInFilters: ['id', 'viewMode', 'asdas'],
            history,
         });

         return (
            <MockPageListingStyle>
               <Router history={history}>
                  <Switch>
                     <PageListing
                        viewList={viewList}
                        FiltersComponent={Filters}
                        title="Contacts"
                        renderResource={(resource, i) => <Card resource={resource} />}
                        renderResourceSkeleton={(resource, i) => <Card skeleton />}
                     />
                  </Switch>
               </Router>
            </MockPageListingStyle>
         );
      }

      return <Component />;
   })
   .add('not found', () => {
      function Component(): any {
         const viewList = useViewList({
            resolves: {
               resources: resolveError,
            },
            ignoreQueryInFilters: ['id', 'viewMode', 'asdas'],
            history,
         });

         return (
            <MockPageListingStyle>
               <Router history={history}>
                  <Switch>
                     <PageListing
                        viewList={viewList}
                        FiltersComponent={Filters}
                        title="Contacts"
                        renderResource={(resource, i) => <Card resource={resource} />}
                        renderResourceSkeleton={(resource, i) => <Card skeleton />}
                     />
                  </Switch>
               </Router>
            </MockPageListingStyle>
         );
      }

      return <Component />;
   })
   .add('not found', () => {
      function Component(): any {
         const viewList = useViewList({
            resolves: {
               resources: resolveNotFound,
            },
            ignoreQueryInFilters: ['id', 'viewMode', 'asdas'],
            history,
         });

         return (
            <MockPageListingStyle>
               <Router history={history}>
                  <Switch>
                     <PageListing
                        viewList={viewList}
                        FiltersComponent={Filters}
                        title="Contacts"
                        renderResource={(resource, i) => <Card resource={resource} />}
                        renderResourceSkeleton={(resource, i) => <Card skeleton />}
                     />
                  </Switch>
               </Router>
            </MockPageListingStyle>
         );
      }

      return <Component />;
   });
