import { useState } from 'react';
import dynamic from 'next/dynamic';

import type {
  LookupServiceLinks,
  PrereleaseUpgradeError,
  PrereleaseUpgradeResponse,
} from '~/lib/songwhipApi/types';
import type { ServiceLinkOverrideCallback } from '~/src/features/presave';
import type { SelectedPrereleaseItem } from '~/src/store/types';

import { ItemTypes } from '~/lib/songwhipApi/types';
import Box from '~/src/components/Box';
import Button from '~/src/components/Button';
import PrimaryButton from '~/src/components/Button/PrimaryButton';
import { NotificationType } from '~/src/components/Notification';
import Text from '~/src/components/Text';
import { PrereleaseIssues, PresaveDetails } from '~/src/features/presave';
import { useI18n } from '~/src/lib/i18n';
import { AlbumPreview } from './components/AlbumPreview';

const EditAlbumDetailsDialogLazy = dynamic({
  ssr: false,
  loader: () => import('~/src/views/AlbumPage/components/EditDetailsDialog'),
});

const EditPrereleaseDetailsDialogLazy = dynamic({
  ssr: false,
  loader: () =>
    import('~/src/views/PrereleasePage/components/EditDetailsDialog'),
});

export const UpgradePrereleaseContent = ({
  album,
  preview: { releasedAlbum, campaignResult, warnings, errors },
  error,
  linksOverride,
  isUpgrading,
  onUpgrade,
  onLinksChange,
  onDetailsChange,
}: {
  album: SelectedPrereleaseItem;
  preview: PrereleaseUpgradeResponse;
  error?: PrereleaseUpgradeError;
  linksOverride?: LookupServiceLinks;
  isUpgrading: boolean;
  onUpgrade: () => void;
  onLinksChange: ServiceLinkOverrideCallback;
  onDetailsChange: () => void;
}) => {
  const [isDetailsOpened, setIsDetailsOpened] = useState(false);
  const { t } = useI18n('upgradePrerelease');

  const renderDetailsDialog = () => {
    const onClose = () => {
      setIsDetailsOpened(false);
    };

    return album.type === ItemTypes.ALBUM ? (
      <EditAlbumDetailsDialogLazy
        onSave={onDetailsChange}
        onClose={onClose}
        album={album}
      />
    ) : (
      <EditPrereleaseDetailsDialogLazy
        onSave={onDetailsChange}
        onClose={onClose}
        prerelease={album}
      />
    );
  };

  const allErrors = error?.data?.errors || errors;

  return (
    <Box flexColumn gap="3rem">
      <AlbumPreview album={releasedAlbum} />
      <Text isParagraph centered size="2rem" letterSpacing={0} isCentered>
        {t('useAlbumForReleaseInfo')}
      </Text>
      {warnings?.length > 0 && (
        <PrereleaseIssues
          title={t('warnings')}
          type={NotificationType.WARNING}
          issues={warnings}
        />
      )}
      <Box flexColumn gap="1.8rem">
        <Text isParagraph centered size="1.5rem" letterSpacing={0} isCentered>
          {t('notYourReleaseInfo')}
        </Text>
        <Button
          text={t('editReleaseDetails')}
          isInline
          onClick={() => {
            setIsDetailsOpened(true);
          }}
        />
      </Box>
      <PresaveDetails
        campaignResult={campaignResult}
        linksOverride={linksOverride}
        errors={error?.data?.errors || errors}
        onLinkChange={onLinksChange}
      />

      {allErrors?.length > 0 && (
        <PrereleaseIssues
          title={t('failedToUpgrade')}
          type={NotificationType.ERROR}
          issues={allErrors}
        />
      )}

      <PrimaryButton
        width="100%"
        text={t('upgradePrerelease')}
        height="4.5em"
        testId="upgradeButton"
        isLoading={isUpgrading}
        onClick={() => {
          onUpgrade();
        }}
      />
      {isDetailsOpened && renderDetailsDialog()}
    </Box>
  );
};