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

import locales from '~/locales/fragments/presave';
import Box from '~/src/components/Box';
import Clickable from '~/src/components/Clickable';
import ExternalLinkIcon from '~/src/components/Icon/ExternalLinkIcon';
import Text from '~/src/components/Text';
import TextInput from '~/src/components/TextInput';
import getServiceDisplayData from '~/src/lib/getServiceDisplayData';
import { useI18nStatic } from '~/src/lib/i18n';
import theme from '~/src/lib/theme';
import localizeLinks from '~/src/lib/utils/resolveLinksForCountry/lib/localizeLinks';
import { formatValidationMessage } from '../utils';

const {
  dark: { colorDanger },
} = theme;

interface PresaveDetailsItemProps {
  campaignResult: PrereleaseServiceCampaignResult;
  errors: PrereleaseUpgradeResponse['errors'];
  linkOverride?: string | null;
  onLinkChange: ServiceLinkOverrideCallback;
  service: LookupService;
  testId?: string;
}

export const PresaveDetailsItem = ({
  testId,
  service,
  errors,
  campaignResult,
  linkOverride,
  onLinkChange,
}: PresaveDetailsItemProps) => {
  const { t } = useI18nStatic<'presave'>(locales);
  const serviceData = getServiceDisplayData(service);

  if (!serviceData) return null;

  const links = campaignResult.links;

  const localizedLink = localizeLinks({
    links: { [service]: links },
    forCountry: 'US',
    sourceCountry: 'US',
  });

  const link = localizedLink[service]?.link;
  const hasNotFoundWarning = !link && !linkOverride;
  const hasNotSetWarning = link && linkOverride === null;
  const hasErrors = errors.length > 0;

  return (
    <Box tag="li" flexColumn gap="0.5em" padding="0.45em 1em" testId={testId}>
      <Box flexRow alignCenter gap="0.5em">
        <serviceData.Icon size="1em" />

        <Text flexRow alignCenter flexGrow withEllipsis>
          <Text isInline size="1em">
            {serviceData.name}
          </Text>
          <Text isInline color="#666" size=".9em">
            &nbsp;·&nbsp;
            {t('totalPresaves', { total: campaignResult.preSaves })}
            &nbsp;·&nbsp;
            {t('totalEmailPresaves', { total: campaignResult.emailSignups })}
          </Text>
        </Text>
      </Box>
      {hasNotFoundWarning && (
        <Text flexRow size="0.75em" color={colorDanger}>
          {t('presaveReleaseLinkNotFoundWarning', {
            serviceName: serviceData.name,
          })}
        </Text>
      )}
      {hasNotSetWarning && (
        <Text flexRow size="0.75em" color={colorDanger}>
          {t('presaveReleaseNotSetWarning', {
            serviceName: serviceData.name,
          })}
        </Text>
      )}
      {errors.map((error) => (
        <Text key={error.message} flexRow size="0.75em" color={colorDanger}>
          {formatValidationMessage(t, error)}
        </Text>
      ))}
      <Box flexRow alignCenter gap="1em">
        <TextInput
          flexGrow
          testId={`${service}PresaveLinkInput`}
          value={
            linkOverride === null
              ? undefined
              : (linkOverride ?? link ?? undefined)
          }
          showClearButtonOnEmpty
          placeholder={t('presaveReleaseLinkPlaceholder', {
            serviceName: serviceData.name,
          })}
          borderColor={
            hasNotFoundWarning || hasNotSetWarning || hasErrors
              ? colorDanger
              : undefined
          }
          onChange={(e) => {
            onLinkChange(
              service,
              // If the input is empty and there is an original link, set the value to null.
              // This is to indicate that we are intentionally ignoring the original link.
              e.value === '' && link ? null : e.value || undefined
            );
          }}
          onClear={
            linkOverride === null || (linkOverride && linkOverride !== link)
              ? () => {
                  onLinkChange(service, link);
                }
              : undefined
          }
        />
        <Clickable
          testId={`${service}PresaveLinkButton`}
          href={linkOverride ?? link}
          inNewTab
          width="auto"
        >
          <ExternalLinkIcon />
        </Clickable>
      </Box>
    </Box>
  );
};