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

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

   return (
      <S.FiltersContainerStyle>
         <FiltersDesktop
            FiltersComponent={props.filterComponent}
            handleFilters={pageListing.updateFilters}
            clearFilters={pageListing.clearFilters}
            filters={pageListing.filters}
         />
         <FiltersMobile
            FiltersComponent={props.filterComponent}
            handleFilters={pageListing.updateFiltersDebounce}
            closeFilters={pageListing.closeFilters}
            filters={pageListing.filters}
            filterMobileOpen={pageListing.filterMobileOpen}
         />
      </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-cy="desktop-filters">
               <FiltersComponent handleFilters={props.handleFilters} filters={props.filters} />
            </div>
         </div>
      </ScreenMedia>
   );
};

function FiltersMobile({ filterMobileOpen, FiltersComponent, handleFilters, filters }): JSX.Element {
   return (
      <ScreenMedia size="mobile">
         <Modal show={filterMobileOpen} animation="slideDown">
            <S.FiltersMobileStyle>
               <FiltersComponent handleFilters={handleFilters} filters={filters} />
            </S.FiltersMobileStyle>
         </Modal>
      </ScreenMedia>
   );
}
