import { ItemTypes } from '@theorchard/songwhip-api';

import type { SelectedPrerelease } from '~/src/store/prereleases/types';

import { getTimezoneOffset } from '~/lib/utils/date';
import { ActionableBanner } from '~/src/components/Banner';
import Box from '~/src/components/Box';
import Clickable from '~/src/components/Clickable';
import EditIcon from '~/src/components/Icon/EditIcon';
import usePublishDraft from '~/src/components/ItemPage/hooks/usePublishDraftPage';
import { NotificationType } from '~/src/components/Notification';
import Text from '~/src/components/Text';
import useHash from '~/src/hooks/useHash';
import { useI18n } from '~/src/lib/i18n';

interface PrereleaseBannerProps {
  prerelease: SelectedPrerelease;
  height: string;
}

const THREE_DAYS_IN_MS = 72 * 60 * 60 * 1000;

export const PrereleaseBanner = ({
  prerelease,
  height,
}: PrereleaseBannerProps) => {
  const publishDraft = usePublishDraft(ItemTypes.PRERELEASE);
  const { t } = useI18n();

  if (!prerelease.userCanEdit) return null;

  if (prerelease.isDraft) {
    return (
      <Box
        testId="prereleaseBanner"
        positionRelative
        zIndex={1}
        flexColumn
        alignCenter
        height={height}
        pointerEvents="all"
        style={{ backgroundColor: 'rgba(51, 51, 51, 0.9)', color: '#fff' }}
      >
        <Box positionRelative flexRow alignEnd alignCenter padding="0 2.2rem">
          <Text
            positionAbsolute
            top="50%"
            left="50%"
            size="1.4rem"
            style={{ transform: 'translate(-50%, -50%)' }}
          >
            {t('item.draftHeaderText')}
          </Text>
          <Clickable
            testId="publishDraft"
            isInline
            title={t('item.publishDraftAction')}
            onClick={() => {
              publishDraft({
                itemId: prerelease.id,
                itemName: prerelease.name,
                pagePath: prerelease.pagePath,
              });
            }}
          >
            <Text bold padding="1rem 0" size="1.7rem">
              {t('item.publishDraftAction')}
            </Text>
          </Clickable>
        </Box>
      </Box>
    );
  }

  return <PrereleaseNotification prerelease={prerelease} height={height} />;
};

const PrereleaseNotification = ({
  prerelease,
  height,
}: {
  prerelease: SelectedPrerelease;
  height: string;
}) => {
  const { setHashParam } = useHash();
  const { t } = useI18n();

  const timeToReleaseMs = getMsToRelease(prerelease);
  const isCloseToRelease =
    timeToReleaseMs !== undefined && timeToReleaseMs <= THREE_DAYS_IN_MS;
  const isUpcAndIsrcMissing =
    !prerelease.sourceUpc && !prerelease.sourceIsrc && !prerelease.sourceUrl;

  if (!isCloseToRelease || !isUpcAndIsrcMissing) return null;

  return (
    <ActionableBanner
      testId="prereleaseBanner"
      type={NotificationType.ERROR}
      message={t('item.prereleaseMissingUpcAndIsrc')}
      height={height}
      action={{
        label: t('app.actions.edit'),
        Icon: EditIcon,
        onClick: () => {
          setHashParam({ editDetails: 'from-banner' });
        },
      }}
    />
  );
};

const getMsToRelease = (prerelease: SelectedPrerelease) => {
  if (!prerelease.releaseDate) return;

  const releaseDate = new Date(prerelease.releaseDate);

  if (prerelease.releaseTimezone) {
    const timezoneOffset = getTimezoneOffset(
      releaseDate,
      prerelease.releaseTimezone
    );

    releaseDate.setHours(releaseDate.getHours() + timezoneOffset);
  }

  return releaseDate.getTime() - Date.now();
};