import { memo } from 'react';

import type { I18nFormatter } from '~/src/lib/i18n';
import type { MappedUserPage } from '~/src/lib/songwhipApi/users/types';

import { ItemTypes } from '~/lib/types';
import Box from '~/src/components/Box';
import Clickable from '~/src/components/Clickable';
import {
  useAppAlert,
  useAppConfirm,
} from '~/src/components/NextApp/lib/CoreUi';
import Text from '~/src/components/Text';
import { useI18n } from '~/src/lib/i18n';
import { useAppRouter } from '~/src/lib/router2';
import { concat } from '~/src/lib/utils/string';
import { restoreCatalogItem } from '~/src/store/catalog/actions';
import { useDispatch } from '~/src/store/redux';
import { CatalogItem } from '../../components';
import { formatTimestamp, getItemTypeLabelKey } from '../utils';

const ArchivedPageItemHeader = ({ item }: { item: MappedUserPage }) => {
  const { t } = useI18n('catalog');
  const { t: appT } = useI18n('app');

  return (
    <Box flexRow alignCenter gap="0.3rem">
      <>
        <div
          style={{
            width: '0.7rem',
            height: '0.7rem',
            borderRadius: '50%',
            backgroundColor: '#666',
          }}
        />
        <Text>{t('archived')}</Text>
        <span>•</span>
      </>
      <Text>{appT(getItemTypeLabelKey(item))}</Text>
    </Box>
  );
};

const ArchivedPageItemActions = ({ item }: { item: MappedUserPage }) => {
  const { t } = useI18n('catalog');
  const { t: appT } = useI18n('app');

  const showConfirmDialog = useAppConfirm();
  const showAlert = useAppAlert();

  const dispatch = useDispatch();
  const router = useAppRouter();

  const handleRestoreClick = () => {
    showConfirmDialog({
      content: t('actions.restorePageConfirm'),
      actionText: t('actions.restorePage'),
      cancelText: appT('actions.cancel'),

      onConfirm: async () => {
        try {
          const restoredItem = await dispatch(restoreCatalogItem(item));

          if (restoredItem) {
            router.push(restoredItem.pagePath);
          }
        } catch {
          showAlert({ content: t('restorePageError') });
        }
      },
    });
  };

  return (
    <Box>
      <Clickable
        testId="catalogItemRestore"
        isInline
        title={t('actions.restorePage')}
        withHoverOpacityFrom={0.65}
        onClick={() => {
          handleRestoreClick();
        }}
      >
        <Text>{t('actions.restorePage')}</Text>
      </Clickable>
    </Box>
  );
};

const getItemSubtitle = (
  item: MappedUserPage,
  t: I18nFormatter<'catalog'>
): string => {
  const archivedAt = item.archivedAtTimestamp
    ? formatTimestamp(item.archivedAtTimestamp, t)
    : undefined;

  return concat([
    item.artistName,
    archivedAt ? t('archivedAt', { value: archivedAt }) : undefined,
  ]);
};

export const ArchivedPageItem = memo(
  ({ testId, item }: { testId?: string; item: MappedUserPage }) => {
    const { t } = useI18n('catalog');

    return (
      <CatalogItem
        testId={testId}
        title={item.name}
        subtitle={getItemSubtitle(item, t)}
        image={item.image}
        squareImage={item.type !== ItemTypes.ARTIST}
        header={<ArchivedPageItemHeader item={item} />}
        renderAfterOuter={() => <ArchivedPageItemActions item={item} />}
      />
    );
  }
);