import React, { memo } from 'react';
import { InfoTitle } from '../../common/components/info-title';
import { SBox } from '../../common/s-components/layout/s-box';
import { TRouteParams, TVendor } from '../../common/types';
import { Skeleton } from './skeleton';
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_TOP_ID } from '../../track-playlists/constants';
import { InfoPopup } from './info-popup';
import { CardsSlider } from './cards-slider';
import { TState, TVisibility } from '../types';
import { Pill } from '../../common/components/pill';
import { fp as _ } from '../../common/utils/fp';
import { SRow } from '../../common/s-components/layout/s-row';
import { DatepickerButton } from '../../common/components/datepicker-button';
import { DateRange } from '../../common/components/date-range';
import {
  DATEPICKER_SOURCE,
  datepickerOpened,
  CLICK_SOURCES,
  onInfoIconPress,
} from '../../analytics';
import { Router } from '../../common/utils/navigation-service';
import { ROUTE_PARAMS, ROUTES } from '../../app/constants';
import { createDateRangeOptions } from '../../common/transducers';
import { Skeleton1 } from './skeleton1';
import { DATE_RANGE_POPUP_VARIANT, POPUP_VARIANT } from '../constants';
import { MARKET_VARIANT_PARAMS } from '../../market-selector/constants';

type TProps = {
  visibility: TVisibility;
  market: string;
  streamLatestDate: string | null | undefined;
  playlistVendor: TVendor;
  range: TState['range'];
  setRange: (range: TState['range']) => void;
  routingParams?: TRouteParams;
};

export const PlaylistPerformance: React.FC<TProps> = memo(props => {
  const {
    // routingParams,
    streamLatestDate,
    range,
    setRange,
    visibility,
    market,
    playlistVendor,
  } = props;

  const isSpotify = playlistVendor === 'spotify';
  // const isApple = playlistVendor === 'apple';
  // const isAmazon = playlistVendor === 'amazon';

  const maxDate = streamLatestDate;

  const goToMarketSelector = () => {
    Router.goTo(ROUTES.marketselector, {
      marketVariant: MARKET_VARIANT_PARAMS.playlistPerformance,
      [ROUTE_PARAMS.playlistrootPerformanceMarket]: market,
    });
  };

  const infoPressHandler = () => {
    togglePopup(POPUP_VARIANT);
    onInfoIconPress({
      source_section: CLICK_SOURCES.PLAYLIST_PAGE_PERFORMANCE,
    });
  };

  const dateRangePressHandler = (variant: string) => {
    togglePopup(variant);
    datepickerOpened({
      datepicker_source: DATEPICKER_SOURCE.PLAYLIST_PERFORMANCE,
    });
  };

  const renderFgLayer = () => {
    return (
      <>
        <Portal id={POPUP_VARIANT}>
          <SwipeablePopup
            variant={POPUP_VARIANT}
            content={<InfoPopup vendor={playlistVendor} />}
          />
        </Portal>
      </>
    );
  };

  const renderFgLayer2 = () => {
    if (!streamLatestDate) return null;

    const options = createDateRangeOptions(streamLatestDate!);

    return (
      <Portal
        id="playlist-performance-datepicker"
        updateIfAnyChanged={{ range }}
      >
        <SwipeablePopup
          fullheight
          variant={DATE_RANGE_POPUP_VARIANT}
          content={
            <DateRange
              rangeTitle="Date Period"
              value={range}
              options={options}
              onRange={setRange}
              confirmRange={() => {
                setTimeout(() => {
                  togglePopup(DATE_RANGE_POPUP_VARIANT, true);
                }, 100);
              }}
              source={DATEPICKER_SOURCE.PLAYLIST_PERFORMANCE}
            />
          }
        />
      </Portal>
    );
  };

  if (_.path('all.skeleton', visibility)) {
    return (
      <>
        {isSpotify ? (
          <SBox pb={78} bg="ebonyClay">
            <Skeleton />
          </SBox>
        ) : (
          <SBox pb={76} bg="ebonyClay">
            <Skeleton1 />
          </SBox>
        )}
      </>
    );
  }

  return (
    <SBox pb={54} bg="ebonyClay">
      {renderFgLayer()}
      {renderFgLayer2()}

      <SBox mx={16} mb={27}>
        <InfoTitle title="Performance" onPress={infoPressHandler} />
      </SBox>

      <SRow px={16} mb={28}>
        {isSpotify ? (
          <SBox mr={12}>
            <Pill
              variant="primary"
              testID="playlist-performance-kpi-market"
              marketCode={market}
              label="KPIS"
              flagMarginTop={1}
              onPress={goToMarketSelector}
            />
          </SBox>
        ) : null}

        <DatepickerButton
          noIcon
          variant="pill"
          range={range}
          maxDate={maxDate}
          onInfoPress={dateRangePressHandler}
          daterangePopupVariant={DATE_RANGE_POPUP_VARIANT}
        />
      </SRow>
      <CardsSlider />
    </SBox>
  );
});