import React, { useContext } from 'react';
import { DeleteEmpty } from '@devesharp/react-utils';
import { Form } from '@unform/web';
import { Button } from '../../Button';
import { Select } from '../../Select';
import { TagsFilters } from '../../TagsFilters';
import { IPageListingChildrenProps } from '../PageListing.interface';
import { PageListingContext } from '../PageListingContext';
import * as S from './SubHeaderContainer.style';

export function SubHeaderContainer(): JSX.Element {
   const context = useContext(PageListingContext);

   return <SubHeaderMainComponent {...context} />;
}

const SubHeaderMainComponent = function FiltersComponent(props: any): JSX.Element {
   const {
      pageCountStart,
      pageCountEnd,
      searching,
      loading,
      showCountListing = true,
      sortOptions,
      resourcesTotal,
      filters,
      formSortRef,
      setSort,
      tagsFilters,
      tagsFiltersRef,
      setFilters,
      openFilters,
   } = props;

   return (
      <S.SubHeaderContainerStyle>
         <SubHeaderComponent
            pageCountStart={pageCountStart}
            pageCountEnd={pageCountEnd}
            searching={searching}
            loading={loading}
            showCountListing={showCountListing}
            resourcesTotal={resourcesTotal}
            filters={filters}
            setSort={setSort}
            openFilters={openFilters}
            sortOptions={sortOptions}
            formSortRef={formSortRef}
         />

         {tagsFilters && (
            <div className="tags-filter-container">
               <TagsFilters
                  ref={tagsFiltersRef}
                  removeTag={(key: string, value: any): void => {
                     const newFilters = { ...filters };
                     newFilters[key] = value;

                     console.log(newFilters);

                     setFilters(() => DeleteEmpty(newFilters));
                  }}
                  {...tagsFilters}
                  filters={filters}
               />
            </div>
         )}
      </S.SubHeaderContainerStyle>
   );
};

const SubHeaderComponent = function FiltersDesktop(props: any): JSX.Element {
   const {
      pageCountStart,
      pageCountEnd,
      searching,
      loading,
      showCountListing = true,
      resourcesTotal,
      sortOptions,
      filters,
      formSortRef,
      openFilters,
      setSort,
   } = props;

   return (
      <div>
         <div className="results-info">
            <div className="text-results">
               {showCountListing && (
                  <span className={`${(searching || loading) && 'text-skeleton'} text-non-skeleton`}>
                     <b>{pageCountStart}</b>-<b>{pageCountEnd}</b> de <b>{resourcesTotal}</b> resultados
                  </span>
               )}
            </div>

            <div className="btn-filter-row">
               <Button
                  onClick={openFilters}
                  data-testid="open-mobile-filters"
                  type="button"
                  w100
                  outline
                  variant="primary"
               >
                  Editar Filtros
               </Button>
            </div>

            {sortOptions && (
               <div className="sort">
                  <Form onSubmit={() => {}} initialData={filters} ref={formSortRef}>
                     <Select
                        name="sort"
                        onChange={(sort) => setSort(sort)}
                        data-testid="sort-filters"
                        options={sortOptions}
                     />
                  </Form>
               </div>
            )}
         </div>
      </div>
   );
};
