import React, { useCallback, useEffect, useState } from 'react';
import { useImmer } from 'use-immer';
import { useEventListener } from '../../../../hooks/useEventListener';
import { CloseBtn } from '../../../CloseBtn';
import { Modal } from '../../../Modal';
import { ScreenMedia } from '../../../ScreenMedia';
import { IPageListingChildrenProps } from '../PageListing.interface';
import { FiltersContainerStyle } from './FiltersContainer.style';

export function FiltersContainer(props: IPageListingChildrenProps): JSX.Element {
   const { FiltersComponent, filterMobileOpen, openFilters, closeFilters, setFilterMobileOpen, viewList } = props;
   const { filters, setFilters } = viewList;
   const [filtersTemp, setFiltersTemp] = useImmer<any>(filters);

   const handleFilters = useCallback(function handleFilters(data: any) {
      setFilters(() => data);
   }, []);

   const handleFiltersMobile = useCallback(function handleFiltersMobile(data: any) {
      setFiltersTemp(() => data);
   }, []);

   const applyFilters = useCallback(
      function applyFilters() {
         setFilters(() => filtersTemp, { replaceUrl: true });
         setFilterMobileOpen(false);
      },
      [filtersTemp],
   );

   const clearFilters = useCallback(function clearFilters() {
      setFilters(() => ({}));
   }, []);

   const clearFiltersMobile = useCallback(function clearFiltersMobile() {
      closeFilters();
      setFilters(() => ({}));
   }, []);

   useEventListener('hashchange', function hashchange() {
      if (window.location.hash === '#filter') {
         setFilterMobileOpen(true);
      } else {
         setFilterMobileOpen(false);
      }
   });

   useEffect(() => {
      if (window.location.hash === '#filter') {
         window.location.replace('');
      }
   }, []);

   return (
      <FiltersContainerStyle>
         <FilterDesktop
            clearFilters={clearFilters}
            FiltersComponent={FiltersComponent}
            handleFilters={handleFilters}
            filters={filters}
         />

         <FilterMobile
            clearFilters={clearFiltersMobile}
            FiltersComponent={FiltersComponent}
            filterMobileOpen={filterMobileOpen}
            applyFilters={applyFilters}
            closeFilters={closeFilters}
            handleFilters={handleFiltersMobile}
            filters={filters}
         />
      </FiltersContainerStyle>
   );
}

function FilterDesktop({ clearFilters, FiltersComponent, handleFilters, filters }): JSX.Element {
   return (
      <ScreenMedia size="desktop">
         <div className="filters">
            <div className="filters-title">
               Filtrar
               <div className="clear-filters" onClick={clearFilters} data-cy="clear-desktop-filters">
                  LIMPAR
               </div>
            </div>

            <div className="filters-content" data-cy="desktop-filters">
               <FiltersComponent handleFilters={handleFilters} filters={filters} />
            </div>
         </div>
      </ScreenMedia>
   );
}

function FilterMobile({
   clearFilters,
   filterMobileOpen,
   FiltersComponent,
   closeFilters,
   applyFilters,
   handleFilters,
   filters,
}): JSX.Element {
   return (
      <ScreenMedia size="mobile">
         <Modal show={filterMobileOpen}>
            <div className="filters-mobile" data-cy="mobile-filters">
               <div className="filters-title">
                  Filtrar
                  <div className="clear-filters text-primary" onClick={clearFilters} data-cy="clear-mobile-filters">
                     LIMPAR FILTROS
                  </div>
                  <div className="close-btn" onClick={closeFilters}>
                     <CloseBtn />
                  </div>
               </div>

               <div className="filters-body">
                  <FiltersComponent handleFilters={handleFilters} filters={filters} />
               </div>

               <div className="filters-btn" data-cy="btn-mobile-filters">
                  <button className="btn btn-primary" onClick={applyFilters} type="button">
                     Filtrar
                  </button>
               </div>
            </div>
         </Modal>
      </ScreenMedia>
   );
}
