import React, { useContext, memo } from 'react';
import { togglePopup } from '../../../common/utils/swipeable-popup-service';
import { InfoTitle } from '../../../common/components/info-title';
import { POPUP_TOP_ID, TOP_PLAYLIST_CARD_HEIGHT } from '../../constants';
import { Portal } from '../../../common/utils/portal/portal';
import { SwipeablePopup } from '../../../common/components/bottom-sheet/swipeable-popup';
import { InfoPopup } from './info-popup';
import { ContextTop } from '../../contexts';
import { Skeleton } from './skeleton';
import { Empty } from './empty';
import { Error } from './error';
import { SBox } from '../../../common/s-components/layout/s-box';
import { fp as _ } from '../../../common/utils/fp';
import { SRow } from '../../../common/s-components/layout/s-row';
import { SH6 } from '../../../common/s-components/typography/s-h6';
import { Card } from './card';
import {
  getCustomRangeEntity,
  getKeyComposed,
} from '../../../common/transducers';
import { Carousel } from '../../../common/components/carousel/carousel';
import { DATE_RANGES } from '../../../common/constants';
import { goToPlaylistPlacement } from '../../services';
import { CLICK_SOURCES, onInfoIconPress } from '../../../analytics';
import { useLatestDateAll } from '../../../common/hooks/use-latest-date-all';

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

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

  const props = useContext(ContextTop);

  const { visibility, activeTab, entity } = props;

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

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

  const streamsType = _.path('extra.streams_type', entity);
  return (
    <SBox mb={45}>
      {visibility.skeleton ? (
        <SBox mb={20}>
          <Skeleton />
        </SBox>
      ) : null}
      {!visibility.skeleton ? (
        <SBox>
          {renderFgLayer()}
          <SRow
            justifyContent="space-between"
            pr={16}
            mb={18}
            height={25}
            alignItems="center"
          >
            <InfoTitle
              testID="info-title-top-5-playlists"
              onPress={() => {
                infoPressHandler(POPUP_TOP_ID);
              }}
              px={16}
              title="Top 5 Playlists"
            />
            {visibility.data ? (
              <SH6 color="periwinkleGray" mt={5}>
                {_.path('standard', range)}
              </SH6>
            ) : null}
          </SRow>
        </SBox>
      ) : null}

      {visibility.empty ? <Empty vendor={activeTab} /> : null}
      {visibility.error || visibility.offline ? <Error /> : null}
      {visibility.data ? (
        <SBox>
          <Carousel
            withDots
            dotsGap={15}
            itemHeight={TOP_PLAYLIST_CARD_HEIGHT + 17}
            keyExtractor={getKeyComposed(['id', 'country_code'])}
            data={entity.data!}
            renderItem={item => {
              return (
                <Card
                  onPress={() => {
                    goToPlaylistPlacement({
                      playlistId: item.id,
                      playlistMarket: item.country_code,
                      playlistVendor: activeTab,
                      playlistImageUrl: item.image_url,
                      playlistName: item.name,
                      placementVariant: 'current',
                    });
                  }}
                  {...item}
                  vendor={activeTab}
                  streamsType={streamsType}
                />
              );
            }}
          />
        </SBox>
      ) : null}
    </SBox>
  );
});