import React, { memo } from 'react';
import { Skeleton } from './skeleton';
import { TracklistHeading } from './tracklist-heading';
import { Tracklist } from './tracklist';
import { ErrorBlock } from '../../../common/components/error-block';
import { SBox } from '../../../common/s-components/layout/s-box';
import {
  NEntityInfinite,
  TEntityVisibility,
  TTrackParams,
  TVendor,
} from '../../../common/types';
import { TTracklistExtended, TTracklistVariant } from '../../types';
import { TracklistEmpty } from './tracklist-empty';
import { TRACKLIST_VARIANT } from '../../constants';

type TExternalProps = {
  variant: TTracklistVariant;
};

type TProps = {
  visibility: TEntityVisibility;
  tracklist: TTracklistExtended;
  personalized?: boolean;
  vendor: TVendor;
  playlistVendor: TVendor;
  isrc?: string;
  getTracklist: NEntityInfinite.TEntityInfiniteGet;
  onCardPress: (params: TTrackParams) => void;
  testID: string;
} & TExternalProps;

export const TracklistSection: React.FC<TProps> = memo(props => {
  const {
    visibility,
    tracklist,
    personalized,
    vendor,
    playlistVendor,
    getTracklist,
    isrc,
    variant,
    onCardPress,
  } = props;

  return (
    <SBox bg="ebonyClay">
      {visibility.skeleton || (visibility.refresh && visibility.empty) ? (
        <Skeleton isPlaylistVariant={variant === TRACKLIST_VARIANT.playlist} />
      ) : null}
      {!visibility.skeleton && variant !== TRACKLIST_VARIANT.playlist ? (
        <TracklistHeading
          visibility={visibility}
          tracklist={tracklist}
          personalized={personalized}
          vendor={vendor}
        />
      ) : null}
      {visibility.data || visibility.extra.sort ? (
        <Tracklist
          playlistVendor={playlistVendor}
          highlightedIsrc={isrc}
          tracklist={tracklist}
          getTracklist={getTracklist}
          personalized={personalized}
          variant={variant}
          onCardPress={onCardPress}
        />
      ) : null}
      {!visibility.data &&
      !visibility.skeleton &&
      !visibility.error &&
      !visibility.extra.sort &&
      !visibility.extra.loading ? (
        <SBox pb={66}>
          <TracklistEmpty />
        </SBox>
      ) : null}
      {visibility.error ? (
        <SBox pb={66}>
          <ErrorBlock
            textTopMargin={-2}
            height={160}
            message="Data failed to load."
          />
        </SBox>
      ) : null}
    </SBox>
  );
});