import React, { useCallback, useContext, useEffect, useState } from 'react';
import { Button } from '../../Button';
import { CloseBtn } from '../../CloseBtn';
import { Modal } from '../../Modal';
import { ScreenMedia } from '../../ScreenMedia';
import { IFiltersContainerProps } from '../PageListing.interface';
import { PageListingContext } from '../PageListingContext';
import * as S from './FiltersContainer.style';

export const FiltersContainer: React.FunctionComponent<IFiltersContainerProps> = function FiltersComponent(
   props,
): JSX.Element {
   const pageListing = useContext(PageListingContext);

   return (
      <S.FiltersContainerStyle>
         <FiltersDesktop
            FiltersComponent={props.filterComponent}
            handleFilters={pageListing.updateFilters}
            clearFilters={pageListing.clearFilters}
            filters={pageListing.filters}
            data={pageListing.data}
         />
         <FiltersMobile
            FiltersComponent={props.filterComponent}
            handleFilters={pageListing.updateFiltersDebounce}
            filters={pageListing.filters}
            data={pageListing.data}
            filterMobileOpen={pageListing.filterMobileOpen}
            clean={props.useClean}
            clearFilters={pageListing.clearFilters}
            closeFilters={pageListing.closeFilters}
            applyFilters={pageListing.applyFiltersDebounce}
         />
      </S.FiltersContainerStyle>
   );
};

const FiltersDesktop = function FiltersDesktop(props: any): JSX.Element {
   const { FiltersComponent } = props;

   return (
      <ScreenMedia showIn="desktop">
         <div className="filters">
            <div className="filters-content" data-testid="desktop-filters">
               <FiltersComponent handleFilters={props.handleFilters} filters={props.filters} data={props.data} />
            </div>
         </div>
      </ScreenMedia>
   );
};

function FiltersMobile({
   filterMobileOpen,
   FiltersComponent,
   handleFilters,
   filters,
   clearFilters,
   closeFilters,
   applyFilters,
   data,
   clean = true,
}): JSX.Element {
   function ClearFilters(): void {
      clearFilters();
   }

   function ApplyFilters(): void {
      applyFilters();
   }

   return (
      <ScreenMedia showIn="mobile">
         <Modal show={filterMobileOpen} animation="slideDown">
            <S.FiltersMobileStyle data-testid="filters-mobile-container">
               {!clean && (
                  <>
                     <div className="filters-title">
                        Filtrar
                        <div
                           className="clear-filters text-primary"
                           onClick={ClearFilters}
                           data-testid="clear-mobile-filters"
                        >
                           LIMPAR FILTROS
                        </div>
                        <div className="close-btn" onClick={closeFilters}>
                           <CloseBtn />
                        </div>
                     </div>

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

                     <div className="filters-btn" data-testid="btn-mobile-filters">
                        <Button onClick={ApplyFilters} type="button">
                           Filtrar
                        </Button>
                     </div>
                  </>
               )}
               {clean && <FiltersComponent handleFilters={handleFilters} filters={filters} />}
            </S.FiltersMobileStyle>
         </Modal>
      </ScreenMedia>
   );
}
