import React, { useRef } from 'react';
import { Router, Switch } from 'react-router-dom';
import { useView } from '@devesharp/react-hooks/lib/useView';
import { useViewList } from '@devesharp/react-hooks/lib/useViewList';
import { CreateRange } from '@devesharp/react-utils/lib/Utils';
import { ResolveSync } from '@devesharp/react-utils/lib/Resolve';
import { storiesOf } from '@storybook/react';
import * as queryString from 'query-string';
import styled from 'styled-components';
import { Tabs, IPropsTabs, ITabsRef } from '.';
import { Button } from '../Button';
import { PageListing } from '../PageListing';
import { history } from '../PageListing/__mocks__';
import { Pagination } from '../Pagination';

const css = styled.div;

const Style = css`
   background: white !important;

   .max-width-120 {
      max-width: 120px;
      overflow: auto;
      padding: 10px 20px;
   }
`;

const data: IPropsTabs = {
   options: [
      {
         id: 1,
         name: 'Detalhes',
      },
      {
         id: 2,
         name: 'Anexos',
      },
      {
         id: 3,
         name: 'Segundas Vias',
      },
      {
         id: 4,
         name: 'TDD',
      },
   ],
   onSelect: (tab) => {
      // console.log(tab);
   },
};

storiesOf('Components/Tabs', module)
   .add('with basic data', () => {
      return (
         <Style>
            <Tabs {...data} />
         </Style>
      );
   })
   .add('with skeleton', () => {
      return (
         <Style>
            <Tabs {...data} skeleton />
         </Style>
      );
   })
   .add('with activeButtonRounded', () => {
      return (
         <Style>
            <Tabs {...data} activeButtonRounded />
         </Style>
      );
   })
   .add('with scroll', () => {
      return (
         <Style>
            <div className="max-width-120">
               <Tabs {...data} />
            </div>
         </Style>
      );
   })
   .add('with custom color', () => {
      return (
         <Style>
            <Tabs {...data} backgroundActiveColor="pink" textActiveColor="pink" textColor="pink" />
         </Style>
      );
   })
   .add('with defaultTab', () => {
      return (
         <Style>
            <Tabs {...data} defaultTab={3} />
         </Style>
      );
   })
   .add('with move tab for first', () => {
      const ref = useRef<ITabsRef>();
      function onSelect(tab: any): any {
         if (tab.id == 4) {
            ref.current.setTab(1);
         }
      }

      return (
         <Style>
            <Tabs ref={ref} {...data} onSelect={onSelect} defaultTab={3} />
         </Style>
      );
   })
   .add('test useHooks', () => {
      function onSelect(tab: any): any {
         history.push({
            search: queryString.stringify({
               ...queryString.parseUrl(window.location.href).query,
               tab: tab.id,
            }),
         });
      }

      return (
         <Router history={history}>
            <Switch>
               <Style>
                  <Tabs
                     options={[
                        {
                           id: 'tab1',
                           name: 'Tab 1',
                        },
                        {
                           id: 'tab2',
                           name: 'Tab 2',
                        },
                     ]}
                     onSelect={onSelect}
                  />

                  <div className="row">
                     <div className="col">
                        <Tab1 name="tab1" />
                     </div>
                     <div className="col">
                        <Tab1 name="tab2" />
                     </div>
                  </div>
               </Style>
            </Switch>
         </Router>
      );
   });

function Tab1({ name }: any): any {
   const viewList = useViewList({
      resolves: {
         resources: ResolveSync((d: any) => {
            const range = CreateRange(parseInt(d.offset ?? '0') + 40, parseInt(d.offset ?? '0'));
            return {
               count: 100,
               results: range.map((id) => ({ id })),
            };
         }),
      },
      ignoreQueryInFilters: ['tab'],
      history,
      changeOnlyQuery: {
         tab: name,
      },
      firstLoad: false,
      initialResources: {
         count: 100,
         results: [
            {
               id: 1,
            },
         ],
      },
   });

   return (
      <>
         <PageListing.Container viewList={viewList}>
            <PageListing.Context
               render={({ resourcesTotal, limit, currentPage, setPage }) => (
                  <Pagination total={resourcesTotal} perPage={limit} currentPage={currentPage} onChange={setPage} />
               )}
            />

            {viewList.resources.map((i) => (
               <div className="card">
                  <h1>{i.id}</h1>
               </div>
            ))}
         </PageListing.Container>
      </>
   );
}
