import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
import { FormHandles } from '@unform/core';
import AppContext from '../../AppProvider/AppContext';
import { NavActions } from '../../NavActions';
import { ITabsRef } from '../../Tabs/Tabs.interface';
import { ITagFilterRef } from '../../TagsFilters/TagsFilters.interface';
import { CardsListingContainer } from './CardsListingContainer';
import { FiltersContainer } from './FiltersContainer';
import { HeaderListingContainer } from './HeaderListingContainer';
import { IPageListingChildrenProps, IPageListingProps } from './PageListing.interface';
import { PageListingStyle } from './PageListing.style';
import { SubHeaderListingContainer } from './SubHeaderListingContainer';

export const PageListing: React.FunctionComponent<IPageListingProps> = (props) => {
   const { FiltersComponent, navActions, viewList } = props;
   const { registerOnSearch, starting } = viewList;
   const { history } = useContext(AppContext);

   useEffect(() => {
      registerOnSearch(() => {
         if (navActions) {
            navActions.onUnselectAll();
         }
      });
   }, []);

   /**
    * Refs
    */
   const tabsRef = useRef<ITabsRef>();
   const formSortRef = useRef<FormHandles>();
   const tagsFiltersRef = useRef<ITagFilterRef>();
   const scrollListingRef = useRef<HTMLDivElement>();

   /**
    * Sobrescrever componentes
    */
   const FiltersContainerComponent = useMemo(() => FiltersContainer, [props.FiltersContainerComponent]);
   const HeaderListingContainerComponent = useMemo(() => HeaderListingContainer, [
      props.HeaderListingContainerComponent,
   ]);

   /**
    * Filters
    */
   const [filterMobileOpen, setFilterMobileOpen] = useState<boolean>(false);
   const openFilters = useCallback(() => {
      setFilterMobileOpen(true);

      if (history) {
         history.push({
            search: window.location.search,
            hash: 'filter',
         });
      } else {
         window.location.hash = 'filter';
      }
   }, []);
   const closeFilters = useCallback(() => {
      setFilterMobileOpen(false);
      if (history) {
         history.goBack();
      } else {
         window.history.back();
      }
   }, []);

   const propsChildren: IPageListingChildrenProps = {
      ...props,
      tabsRef,
      scrollListingRef,
      formSortRef,
      tagsFiltersRef,
      filterMobileOpen,
      setFilterMobileOpen,
      openFilters,
      closeFilters,
   };

   return (
      <PageListingStyle>
         {!starting && <span data-testid="started" />}
         <div className="col-filters">
            <FiltersContainerComponent {...propsChildren} />
         </div>

         <div className="col-listing">
            {navActions && !!navActions.selected && (
               <span data-testid="nav-actions-container">
                  <NavActions {...navActions} />
               </span>
            )}
            <div className="col-listing--inner">
               <HeaderListingContainer {...propsChildren} />
               <SubHeaderListingContainer {...propsChildren} />
               <CardsListingContainer {...propsChildren} />
            </div>
         </div>
      </PageListingStyle>
   );
};
