import React, { useContext, memo } from 'react';
import { InfoTitle } from '../../../common/components/info-title';
import { togglePopup } from '../../../common/utils/swipeable-popup-service';
import { POPUP_REMOVALS_ID } from '../../constants';
import { HorizontalCarousel } from '../shared/horizontal-carousel';
import { CLICK_SOURCES, onInfoIconPress } from '../../../analytics';
import { Portal } from '../../../common/utils/portal/portal';
import { SwipeablePopup } from '../../../common/components/bottom-sheet/swipeable-popup';
import { InfoPopup } from './info-popup';
import { Skeleton } from '../shared/skeleton';
import { Empty } from '../shared/empty';
import { Error } from '../shared/error';
import { SBox } from '../../../common/s-components/layout/s-box';
import { ContextLatestRemovals } from '../../contexts';

export const Removals = memo(() => {
  const infoPressHandler = (variant: string) => {
    togglePopup(variant);
    onInfoIconPress({ source_section: CLICK_SOURCES.LATEST_REMOVALS });
  };

  const renderFgLayer = () => {
    return (
      <>
        <Portal id="track-playlists:removals">
          <SwipeablePopup variant={POPUP_REMOVALS_ID} content={<InfoPopup />} />
        </Portal>
      </>
    );
  };

  const props = useContext(ContextLatestRemovals);
  const { visibility, entity, activeTab } = props;

  if (activeTab === 'amazon') {
    return null;
  }

  return (
    <>
      {renderFgLayer()}
      {!visibility.skeleton ? (
        <InfoTitle
          testID="info-title-latest-removals"
          onPress={() => {
            infoPressHandler(POPUP_REMOVALS_ID);
          }}
          px={16}
          mb={19}
          mt={0}
          title="Latest Removals"
        />
      ) : null}
      {visibility.skeleton ? (
        <SBox px={16} pb={44}>
          <Skeleton />
        </SBox>
      ) : null}
      {visibility.empty ? (
        <SBox px={16} pb={45}>
          <Empty vendor={activeTab} variant="removals" />
        </SBox>
      ) : null}
      {visibility.error || visibility.offline ? (
        <SBox px={16} pb={45}>
          <Error />
        </SBox>
      ) : null}
      {visibility.data ? (
        <SBox pb={29}>
          <HorizontalCarousel
            entity={entity}
            vendor={activeTab}
            variant="removals"
          />
        </SBox>
      ) : null}
    </>
  );
});