import React, { memo } from 'react';
import { Portal } from '../../../common/utils/portal/portal';
import { SwipeablePopup } from '../../../common/components/bottom-sheet/swipeable-popup';
import { POPUP_INFO_ID } from '../../constants';
import { InfoPopup } from './info-popup';
import { InfoTitle } from '../../../common/components/info-title';
import { togglePopup } from '../../../common/utils/swipeable-popup-service';
import { CLICK_SOURCES, onInfoIconPress } from '../../../analytics';
// import { ContextHeader } from '../../contexts';
// import { TContextHeader } from '../../types';
// import { SBox } from '../../../common/s-components/layout/s-box';
// import { Skeleton } from './skeleton';
// import { ROUTE_PARAMS } from '../../../app/constants';
// import { fp as _ } from '../../../common/utils/fp';

export const Header = memo(() => {
  // const props: TContextHeader = useContext(ContextHeader);
  // const { loading, refresh, tiktokListLoading, tiktokParams } = props;
  // const tiktokVariant = _.path(ROUTE_PARAMS.tiktokVariant, tiktokParams);
  // const showSkeleton =
  //   ((loading && tiktokVariant === SINGLE_VARIANT) ||
  //     (tiktokListLoading && tiktokVariant === MULTIPLE_VARIANT)) &&
  //   !refresh;

  const infoPressHandler = (variant: string) => {
    togglePopup(variant);
    onInfoIconPress({
      source_section: CLICK_SOURCES.TIKTOK_KPIS,
    });
  };

  const renderFgLayer = () => {
    return (
      <>
        <Portal id="tiktok-performance:header">
          <SwipeablePopup variant={POPUP_INFO_ID} content={<InfoPopup />} />
        </Portal>
      </>
    );
  };

  return (
    <>
      {renderFgLayer()}
      {/*{showSkeleton ? (*/}
      {/*  <SBox mb={32}>*/}
      {/*    <Skeleton />*/}
      {/*  </SBox>*/}
      {/*) : null}*/}
      {/*{!showSkeleton ? (*/}
      <>
        <InfoTitle
          testID="info-title-tiktok-performance"
          onPress={() => {
            infoPressHandler(POPUP_INFO_ID);
          }}
          px={16}
          mb={27}
          title="TikTok KPIs"
        />
      </>
      {/*) : null}*/}
    </>
  );
});