import React from 'react';
import { InfoTracklist } from '../../../playlist-tracklist-core/components/tracklist-section/info-tracklist';
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 { 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 { TEntityVisibility, TVendor } from '../../../common/types';
import { POPUP_INFO_ID } from '../../../common/constants';

type TProps = {
  vendor: TVendor;
  personalized: boolean;
  title: string;
  tracklistVisibility: TEntityVisibility;
};

export const SectionHeading: React.FC<TProps> = props => {
  const { vendor, personalized, title, tracklistVisibility } = props;
  const isEmpty = tracklistVisibility.empty;
  return (
    <>
      <InfoTracklist vendor={vendor} />
      <SRow
        height={22}
        ml={16}
        mb={isEmpty ? 0 : 20}
        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>
                {tracklistVisibility.skeleton ||
                tracklistVisibility.extra.sort ? (
                  <SkeletonsSmall mt={4} ml={2} />
                ) : tracklistVisibility.data || tracklistVisibility.error ? (
                  <SH2 letterSpacing={-0.2} mr={5}>
                    {title}
                  </SH2>
                ) : null}
              </SRow>
            )}
          />
        )}
      </SRow>
    </>
  );
};