import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { View } from 'react-native';
import * as _ from 'lodash';
import { ThemeProvider, useTheme } from 'styled-components';
import { NumberFormat } from '../../../../services';
import { ITheme } from '../../../AppProvider/ITheme';
import { NavigationBar } from '../../../NavigationBar';
import { Tabs } from '../../../Tabs/native';
import { IPageListingChildrenProps } from '../PageListing.interface';

export function HeaderListingContainer(props: IPageListingChildrenProps): JSX.Element {
   const { onClickHeaderBtn, tabs, tabsRef, navActions, scrollListingRef } = props;
   const { title, textResourceSingular = 'resultado', textResourcePlural = 'resultados', viewList } = props;
   const { resourcesTotal, searching, starting } = viewList;
   const titlePage =
      title ||
      `${NumberFormat(resourcesTotal, 0)} ${resourcesTotal === 1 ? textResourceSingular : textResourcePlural} ${
         resourcesTotal === 1 ? 'encontrado' : 'encontrados'
      }`;

   // Configure theme
   const theme: ITheme = useTheme();
   if (theme) {
      theme.tabs = theme?.PageListing?.tabs || {};
      theme.tabs.backgroundActiveColor = '#fff';
      theme.tabs.textActiveColor = '#000';
   }

   return <HeaderListingContainerRender titlePage={titlePage} tabs={tabs} theme={theme} tabsRef={tabsRef} />;
}

const HeaderListingContainerRender = React.memo(function HeaderListingContainerRender({
   titlePage,
   tabs,
   theme = {},
   tabsRef,
}: any): any {
   return (
      <View style={{ backgroundColor: '#000' }}>
         <NavigationBar title={titlePage} />
         {tabs && (
            <ThemeProvider theme={theme}>
               <View>
                  <Tabs {...tabs} ref={tabsRef} />
               </View>
            </ThemeProvider>
         )}
      </View>
   );
},
_.isEqual);
