import React, { useContext, memo } from 'react';
import { Nullable } from 'tsdef';
import { ContextMarkets } from '../../contexts';
import { TContextMarkets } from '../../types';
import { Skeleton } from './skeleton';
import { TopMarketsWidget } from './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 {
  CREATIONS_POPUP_MARKET_ID,
  VIEWS_POPUP_MARKET_ID,
} from '../../constants';
import { formatYearDate } from '../../../common/transducers';
import { ErrorBlock } from '../../../common/components/error-block';
import { Carousel } from '../../../common/components/carousel/carousel';
import { MarketsPopup } from './markets-popup';
import { SBox } from '../../../common/s-components/layout/s-box';
import { tiktokMarketDetailsOpened } from '../../../analytics';

type TProps = {};

export const Markets: React.FC<TProps> = memo(() => {
  const props: TContextMarkets = useContext(ContextMarkets);
  const { visibility, refresh, entity, dateRange, trackData } = props;
  const { skeleton, error, empty, data } = visibility;
  const { start_date, end_date } = dateRange;
  const dateRangeTitle = `${formatYearDate(start_date)}–${formatYearDate(
    end_date
  )}`;
  const showSkeleton = skeleton && !refresh;

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

    tiktokMarketDetailsOpened({
      source_track_id: _.path('id', trackData),
      source_track_isrc: _.path('isrc', trackData),
      source_track_name: _.path('name', trackData),
      kpi_opened: variant === CREATIONS_POPUP_MARKET_ID ? 'Creations' : 'Views',
    });
  };

  const renderFgLayer = () => {
    const creations = _.path('data.creations', entity) || [];
    const views = _.path('data.video_views', entity) || [];

    const params = {
      dateRange,
      data: creations | views,
    };
    return (
      <>
        <Portal id="creations-markets" updateIfAnyChanged={params}>
          <SwipeablePopup
            variant={CREATIONS_POPUP_MARKET_ID}
            content={
              <MarketsPopup
                data={creations}
                dateRange={dateRangeTitle}
                variant="creations"
              />
            }
          />
        </Portal>
        <Portal id="views-markets" updateIfAnyChanged={params}>
          <SwipeablePopup
            variant={VIEWS_POPUP_MARKET_ID}
            content={
              <MarketsPopup
                data={views}
                dateRange={dateRangeTitle}
                variant="views"
              />
            }
          />
        </Portal>
      </>
    );
  };

  if (showSkeleton) {
    return <Skeleton />;
  }

  if ((!error && data) || empty) {
    const marketsData = entity && _.path('data', entity);

    return (
      <SBox>
        {renderFgLayer()}

        <Carousel
          slideFullwidth={false}
          data={['creations', 'views']}
          keyExtractor={item => item}
          renderItem={(
            item: any,
            index?: number,
            height?: Nullable<number>
          ) => {
            return (
              <TopMarketsWidget
                height={height!}
                data={marketsData!}
                variant={index === 0 ? 'creations' : 'views'}
                onPress={() => {
                  infoPressHandler(
                    index === 0
                      ? CREATIONS_POPUP_MARKET_ID
                      : VIEWS_POPUP_MARKET_ID
                  );
                }}
                pl={index === 0 ? 16 : 0}
                pr={16}
              />
            );
          }}
        />
      </SBox>
    );
  }

  if (error) {
    return <ErrorBlock mb={35} height={160} message="Data failed to load." />;
  }

  return null;
});