import React from 'react';
import { SRow } from '../../../common/s-components/layout/s-row';
import { InfoTitle } from '../../../common/components/info-title';
import { togglePopup } from '../../../common/utils/swipeable-popup-service';
import { fp as _ } from '../../../common/utils/fp';
import { TracklistTitle } from '../../../common/components/tracklist-section/tracklist-title';
import { SH2 } from '../../../common/s-components/typography/s-h2';
import { SkeletonsSmall } from '../../../common/components/skeleton-small';
import { FETCH_TYPE, POPUP_INFO_ID } from '../../../common/constants';
import { InfoTracklist } from './info-tracklist';
import { TEntityVisibility, TVendor } from '../../../common/types';
import { TTracklistExtended } from '../../types';
import { formatStreamDigit } from '../../../common/transducers';

type TProps = {
  visibility: TEntityVisibility;
  tracklist: TTracklistExtended;
  personalized?: boolean;
  vendor: TVendor;
};

export const TracklistHeading: React.FC<TProps> = props => {
  const { tracklist, personalized, visibility, vendor } = props;
  const { pagination } = tracklist || {};
  const { error } = visibility;
  const { loadingVariant } = tracklist || {};
  const isSorting = loadingVariant === FETCH_TYPE.sort;
  const title = `(${
    error
      ? 'N/A'
      : formatStreamDigit(_.path('total', pagination) as number, {
          addComma: true,
        }) || ''
  })`;

  return (
    <>
      <InfoTracklist vendor={vendor} />
      <SRow height={54} px={16} pb={32} justifyContent="space-between">
        {personalized ? (
          <InfoTitle
            testID="info-title-personalized-tracklist"
            title="Personalized Tracklist"
            onPress={() => {
              togglePopup(POPUP_INFO_ID);
            }}
          />
        ) : (
          <TracklistTitle
            renderTitle={() => (
              <SRow>
                <SH2 mr={6}>Tracklist</SH2>
                {isSorting ? (
                  <SkeletonsSmall mt={4} ml={2} />
                ) : visibility.data ? (
                  <SH2 mr={5}>{title}</SH2>
                ) : visibility.error ? (
                  <SH2 mr={5}>(N/A)</SH2>
                ) : null}
              </SRow>
            )}
          />
        )}
      </SRow>
    </>
  );
};