import { useState } from 'react';

import type { SelectedAlbum } from '~/src/store/albums/types';

import { ActionableBanner } from '~/src/components/Banner';
import AddLinksIcon from '~/src/components/Icon/AddLinksIcon';
import LazyComponent from '~/src/components/LazyComponent';
import { NotificationType } from '~/src/components/Notification';
import { SERVICES } from '~/src/lib/getServiceDisplayData';
import { useI18n } from '~/src/lib/i18n';

interface AlbumBannerProps {
  album: SelectedAlbum;
  height: string;
}

export const AlbumBanner = ({ album, height }: AlbumBannerProps) => {
  if (!album.userCanEdit) return null;

  if (shouldShowMissingServicesBanner(album)) {
    return <MissingServicesNotification album={album} height={height} />;
  }

  return null;
};

const MissingServicesNotification = ({
  album,
  height,
}: {
  album: SelectedAlbum;
  height: string;
}) => {
  const { t } = useI18n();
  const [isDialogOpen, setIsDialogOpen] = useState(false);

  const missingServices = album.missingServices || [];
  const displayNames = missingServices.map(
    (service) => SERVICES[service].name || service
  );

  const isSingleService = displayNames.length === 1;
  const servicesText = isSingleService
    ? displayNames[0]
    : displayNames.length === 2
      ? `${displayNames[0]} and ${displayNames[1]}`
      : `${displayNames.slice(0, -1).join(', ')}, and ${displayNames[displayNames.length - 1]}`;

  return (
    <>
      <ActionableBanner
        testId="albumBanner"
        type={NotificationType.WARNING}
        message={t(
          isSingleService
            ? 'item.missingServicesBannerTextSingle'
            : 'item.missingServicesBannerTextMultiple',
          isSingleService
            ? { service: servicesText }
            : { services: servicesText }
        )}
        height={height}
        action={{
          label: t('app.actions.add'),
          Icon: AddLinksIcon,
          onClick: () => {
            setIsDialogOpen(true);
          },
        }}
      />
      {isDialogOpen && (
        <LazyComponent
          loader={() =>
            import('./AddMissingLinksDialog').then(
              (m) => m.AddMissingLinksDialog
            )
          }
          onClose={() => setIsDialogOpen(false)}
          album={album}
        />
      )}
    </>
  );
};

export const shouldShowMissingServicesBanner = (album: SelectedAlbum) => {
  return album.missingServices && album.missingServices.length > 0;
};