import React, { useContext, memo } from 'react';
// import { SText } from '../../../common/s-components/typography/s-text';
import { InfoTitle } from '../../../common/components/info-title';
import { togglePopup } from '../../../common/utils/swipeable-popup-service';
// import { CLICK_SOURCES, onInfoIconPress } from '../../../analytics';
import { POPUP_ADDS_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 { ContextLatestAdds } from '../../contexts';
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 { getCustomRangeEntity } from '../../../common/transducers';
import { DATE_RANGES } from '../../../common/constants';
import { Media } from '../../../common/components/media';
import { fp as _ } from '../../../common/utils/fp';
import { SH6 } from '../../../common/s-components/typography/s-h6';
import { CLICK_SOURCES, onInfoIconPress } from '../../../analytics';
import { useLatestDateAll } from '../../../common/hooks/use-latest-date-all';

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

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

  const props = useContext(ContextLatestAdds);

  const {
    streamLatestDateValueSpotify,
    streamLatestDateValueApple,
    streamLatestDateValueAmazon,
  } = useLatestDateAll();

  const { visibility, entity, activeTab } = props;
  const range = getCustomRangeEntity(
    DATE_RANGES.WEEK,
    {
      amazon: streamLatestDateValueAmazon,
      spotify: streamLatestDateValueSpotify,
      apple: streamLatestDateValueApple,
    }[activeTab]
  );

  return (
    <SBox>
      {renderFgLayer()}
      {!visibility.skeleton ? (
        <Media px={16} pb={19} alignItems="center">
          <InfoTitle
            testID="info-title-latest-adds"
            onPress={() => {
              infoPressHandler(POPUP_ADDS_ID);
            }}
            title="Latest Adds"
          />
          <Media.Figure>
            {visibility.data ? (
              <SH6 color="periwinkleGray" mt={4}>
                {_.path('standard', range)}
              </SH6>
            ) : null}
          </Media.Figure>
        </Media>
      ) : null}
      {visibility.skeleton ? (
        <SBox px={16} pb={46}>
          <Skeleton />
        </SBox>
      ) : null}
      {visibility.empty ? (
        <SBox px={16} pb={46}>
          <Empty vendor={activeTab} variant="adds" />
        </SBox>
      ) : null}
      {visibility.error || visibility.offline ? (
        <SBox px={16} pb={46}>
          <Error />
        </SBox>
      ) : null}
      {visibility.data ? (
        <SBox pb={30}>
          <HorizontalCarousel
            entity={entity}
            vendor={activeTab}
            variant="adds"
          />
        </SBox>
      ) : null}
    </SBox>
  );
});