import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { Button } from '../../../Button/web';
import { CloseBtn } from '../../../CloseBtn';
import { Modal } from '../../../Modal';
import { NavActions } from '../../../NavActions';
import { ScreenMedia } from '../../../ScreenMedia';
import { Tabs } from '../../../Tabs/web';
import { FiltersContainer } from '../FiltersContainer';
import { IPageListingChildrenProps } from '../PageListing.interface';
import { HeaderListingContainerStyle } from './HeaderListingContainer.style';

export function HeaderListingContainer(props: IPageListingChildrenProps): JSX.Element {
   const { onClickHeaderBtn, tabs, tabsRef, navActions, scrollListingRef } = props;
   const TitleContainerComponent = useMemo(() => TitleContainer, [props.TitleContainerComponent]);

   return (
      <HeaderListingContainerStyle>
         <div className="page-listing-title">
            <div className="d-flex">
               <div className="flex-fill align-self-center">
                  <TitleContainerComponent {...props} />
               </div>
               <div className="text-right align-self-center">
                  {onClickHeaderBtn && <Button onClick={onClickHeaderBtn}>Adicionar</Button>}
               </div>
            </div>
         </div>

         {tabs && (
            <div className="header-listing-tabs-container">
               <Tabs {...tabs} ref={tabsRef} />
            </div>
         )}
      </HeaderListingContainerStyle>
   );
}

function TitleContainer(props: IPageListingChildrenProps): JSX.Element {
   const { title, textResourceSingular = 'resultado', textResourcePlural = 'resultados', viewList } = props;

   const { resourcesTotal, searching, starting } = viewList;

   return (
      <h1>
         <span className={`${(searching || starting) && 'text-skeleton'} text-non-skeleton`}>
            {title ||
               `${resourcesTotal} ${resourcesTotal === 1 ? textResourceSingular : textResourcePlural} ${
                  resourcesTotal === 1 ? 'encontrado' : 'encontrados'
               }`}
         </span>
      </h1>
   );
}
