import React, { memo } from 'react';
import { Nullable } from 'tsdef';
import { TVisibility } from '../types';
import { theme } from '../../app/theme';
import { togglePopup } from '../../common/utils/swipeable-popup-service';
import { SBox } from '../../common/s-components/layout/s-box';
import { InfoTitle } from '../../common/components/info-title';
import { ErrorBlock } from '../../common/components/error-block';
import { SkeletonTitle } from './skeleton-title';
import { SkeletonChart } from './skeleton-chart';
import { ChartsCard } from './charts-card';
import { EmptyChart } from './empty-chart';
import { NoCharts } from './no-charts';
import { CLICK_SOURCES, onInfoIconPress } from '../../analytics';
import { Router } from '../../common/utils/navigation-service';
import { ROUTES } from '../../app/constants';
import { Portal } from '../../common/utils/portal/portal';
import { SwipeablePopup } from '../../common/components/bottom-sheet/swipeable-popup';
import { InfoChartPlacement } from './info-cards/info-chart-placement';

type TProps = {
  visibility: TVisibility;
  spotifyTotal: number;
  spotifyTopMarket: Nullable<string>;
  appleTotal: number;
  appleTopMarket: Nullable<string>;
};

export const TrackCharts: React.FC<TProps> = memo(props => {
  const {
    visibility,
    spotifyTotal,
    spotifyTopMarket,
    appleTotal,
    appleTopMarket,
  } = props;
  const paddingBottom = visibility.empty ? 53 : 38;
  const onInfoPress = (variant: string) => {
    togglePopup(variant);
    onInfoIconPress({ source_section: CLICK_SOURCES.CHART_PLACEMENTS });
  };

  const goToTrackChartsList = (provider: string) => () => {
    Router.goTo(ROUTES.chartlists, { provider });
  };

  const renderFgLayer = () => {
    return (
      <>
        <Portal id="track:charts-placement">
          <SwipeablePopup
            variant="chart-placement"
            content={<InfoChartPlacement />}
          />
        </Portal>
      </>
    );
  };

  return (
    <>
      {renderFgLayer()}
      <SBox px={16} pb={paddingBottom} bg={theme.colors.ebonyClay}>
        {visibility.skeleton ? <SkeletonTitle /> : null}
        {!visibility.skeleton ? (
          <InfoTitle
            testID="info-title-chart-placement"
            onPress={() => {
              onInfoPress('chart-placement');
            }}
            mb={19}
            title="Chart Placements"
          />
        ) : null}
        {visibility.skeletonSpotify ? <SkeletonChart /> : null}
        {visibility.errorSpotify ? (
          <ErrorBlock
            message="Spotify charts failed to load."
            height={80}
            ml={0}
            mr={0}
            mb={16}
          />
        ) : null}
        {visibility.dataSpotify ? (
          <ChartsCard
            chartsLength={spotifyTotal}
            topMarket={spotifyTopMarket}
            vendor="spotify"
            onPress={goToTrackChartsList('spotify')}
          />
        ) : null}
        {visibility.emptySpotify ? <EmptyChart vendor="spotify" /> : null}
        {visibility.skeletonApple ? <SkeletonChart /> : null}
        {visibility.errorApple ? (
          <ErrorBlock
            message="Apple Music charts failed to load."
            height={80}
            ml={0}
            mr={0}
            mb={16}
          />
        ) : null}
        {visibility.dataApple ? (
          <ChartsCard
            chartsLength={appleTotal}
            topMarket={appleTopMarket}
            vendor="apple"
            onPress={goToTrackChartsList('apple')}
          />
        ) : null}
        {visibility.emptyApple ? <EmptyChart vendor="apple" /> : null}

        {visibility.empty ? <NoCharts /> : null}
      </SBox>
    </>
  );
});