import React, { useContext, memo } from 'react';
import { SBox } from '../../../common/s-components/layout/s-box';
import { ContextTracklistsCards } from '../../context';
import { Skeleton } from './skeleton';
import { HorizontalCarousel } from './horizontal-carousel';
import { fp as _ } from '../../../common/utils/fp';
import { SectionHeading } from './section-heading';
import { formatStreamDigit } from '../../../common/transducers';

type TProps = {
  personalized: boolean;
};

export const TracklistsCards = memo((params: TProps) => {
  const props = useContext(ContextTracklistsCards);
  const {
    vendor,
    tracklistsCardsData,
    visibility,
    tracklist,
    tracklistVisibility,
  } = props;
  const { personalized } = params;
  const { pagination } = tracklist || {};
  const anyError = tracklistVisibility.error;
  const title = anyError
    ? '(N/A)'
    : _.path('total', pagination)
    ? `(${formatStreamDigit(_.path('total', pagination) as number, {
        addComma: true,
      })})`
    : '';

  if (
    (tracklistVisibility.skeleton || visibility.skeleton) &&
    !tracklistVisibility.error
  ) {
    return <Skeleton vendor={vendor} />;
  }

  return (
    <SBox pb={anyError ? 0 : 20} bg="ebonyClay">
      <SectionHeading
        vendor={vendor}
        personalized={personalized}
        title={title}
        tracklistVisibility={tracklistVisibility}
      />
      {_.length(tracklistsCardsData) && !tracklistVisibility.error ? (
        <SBox pb={0}>
          <HorizontalCarousel cards={tracklistsCardsData!} vendor={vendor} />
        </SBox>
      ) : null}
    </SBox>
  );
});