import React, { useContext, memo } from 'react';
import { ContextMarkets } from '../../contexts';
import { TContextMarkets } from '../../types';
import { Skeleton } from './skeleton';
import { TopMarketsWidget } from '../../../common/components/top-markets-widget';
import { fp as _ } from '../../../common/utils/fp';
import { togglePopup } from '../../../common/utils/swipeable-popup-service';
import { Portal } from '../../../common/utils/portal/portal';
import { SwipeablePopup } from '../../../common/components/bottom-sheet/swipeable-popup';
import { POPUP_MARKET_ID } from '../../constants';
import { formatYearDate } from '../../../common/transducers';
import { MarketsPopup } from './markets-popup';
import { ErrorBlock } from '../../../common/components/error-block';
import { EmptyMarkets } from './empty-markets';
import { youtubeVideoMarketDetailsOpened } from '../../../analytics';

export const Markets = memo(() => {
  const props: TContextMarkets = useContext(ContextMarkets);
  const {
    visibility,
    refresh,
    entity,
    dateRange,
    youtubeData,
    trackData,
    videoRank,
    youtubePageVariant,
  } = props;
  const { skeleton, error, empty, data } = visibility;
  const marketsData = _.path('data', entity);
  const showSkeleton = skeleton && !refresh;
  const { start_date, end_date } = dateRange;
  const dateRangeTitle = `${formatYearDate(start_date)}–${formatYearDate(
    end_date
  )}`;

  const infoPressHandler = (variant: string) => {
    togglePopup(variant);

    youtubeVideoMarketDetailsOpened({
      source_track_id: _.path('id', trackData),
      source_track_isrc: _.path('isrc', trackData),
      source_track_name: _.path('name', trackData),
      video_id: _.path('data.id', youtubeData),
      video_name: _.path('data.title', youtubeData),
      video_source_type: _.compose(
        _.toUpperSafe,
        _.path('data.source')
      )(youtubeData),
      video_rank: videoRank,
      variant: youtubePageVariant,
    });
  };

  const renderFgLayer = () => {
    const markets = (entity && _.path('data.items', entity)) || [];
    const params = {
      dateRange,
      data: markets,
    };
    return (
      <>
        <Portal id="youtube-markets" updateIfAnyChanged={params}>
          <SwipeablePopup
            variant={POPUP_MARKET_ID}
            content={<MarketsPopup data={markets} dateRange={dateRangeTitle} />}
          />
        </Portal>
      </>
    );
  };

  return (
    <>
      {showSkeleton ? (
        <Skeleton />
      ) : error ? (
        <ErrorBlock
          height={240}
          textTopMargin={-4}
          message="Data failed to load."
        />
      ) : empty ? (
        <EmptyMarkets />
      ) : (
        <>
          {renderFgLayer()}
          {data && (
            <TopMarketsWidget data={marketsData!} onPress={infoPressHandler} />
          )}
        </>
      )}
    </>
  );
});