import type {
  LookupServiceLinks,
  PrereleaseUpgradeResponse,
} from '~/lib/songwhipApi/types';
import type { LookupService } from '~/lib/songwhipLookup/types';
import type {
  PrereleaseCampaignResult,
  ServiceLinkOverrideCallback,
} from '../types';

import locales from '~/locales/fragments/presave';
import Card from '~/src/components/Card';
import Text from '~/src/components/Text';
import { useI18nStatic } from '~/src/lib/i18n';
import { PresaveDetailsItem } from './PresaveDetailsItem';

interface PresaveDetailsProps {
  campaignResult: PrereleaseCampaignResult;
  errors: PrereleaseUpgradeResponse['errors'];
  linksOverride?: LookupServiceLinks;
  onLinkChange: ServiceLinkOverrideCallback;
  showFinalWarning?: boolean;
}

export const PresaveDetails = ({
  campaignResult,
  linksOverride,
  errors,
  onLinkChange,
  showFinalWarning = true,
}: PresaveDetailsProps) => {
  const { t, tx } = useI18nStatic<'presave'>(locales);

  return (
    <div>
      <Text tag="h2" isBold color="#666" centered size=".9em" letterSpacing={0}>
        {t('campaignResults')}
      </Text>
      <Card
        tag="ul"
        data-testid="releaseTaskDetails"
        margin=".8em 0"
        padding=".9em 0 .8em"
      >
        {Object.entries(campaignResult.services).map(
          ([service, serviceCampaignResult]) => (
            <PresaveDetailsItem
              key={service}
              service={service as LookupService}
              campaignResult={serviceCampaignResult}
              errors={errors.filter((e) => e.service === service)}
              linkOverride={linksOverride?.[service as LookupService]}
              onLinkChange={onLinkChange}
            />
          )
        )}
      </Card>
      {showFinalWarning && (
        <Text size="1.3rem" centered>
          {tx('presaveFinalWarning')}
        </Text>
      )}
    </div>
  );
};