import React, { useContext, 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 { CLICK_SOURCES, onInfoIconPress } from '../../../analytics';
import { ROUTE_PARAMS } from '../../../app/constants';
import { fp as _ } from '../../../common/utils/fp';
import { MULTIPLE_VARIANT, SINGLE_VARIANT } from '../../../youtube/constants';

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

  const infoPressHandler = (variant: string) => {
    togglePopup(variant);
    onInfoIconPress({
      source_section:
        youtubeVariant === SINGLE_VARIANT
          ? CLICK_SOURCES.YT_VIEWS_BY_SOURCE
          : CLICK_SOURCES.YT_VIEWS_BY_SOURCE_ALL,
    });
  };

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

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