import React, { useContext } from 'react';
import { Button } from '../../Button';
import { Tabs } from '../../Tabs';
import { IPageListingChildrenProps } from '../PageListing.interface';
import { PageListingContext } from '../PageListingContext';
import * as S from './HeaderContainer.style';

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

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

const HeaderMainComponent = function FiltersComponent(props: IPageListingChildrenProps): JSX.Element {
   const { title, tabs } = props;

   return <HeaderComponent title={title} tabs={tabs} />;
};

const HeaderComponent = function FiltersDesktop(props: any): JSX.Element {
   const { title, tabs } = props;

   return (
      <S.HeaderContainerStyle showIn="desktop">
         <div className="page-listing-title">
            <div className="d-flex">
               <div className="flex-fill align-self-center">
                  <h1>{title}</h1>
               </div>
               <div className="text-right align-self-center">
                  <Button onClick={() => {}}>Adicionar</Button>
               </div>
            </div>
         </div>

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