import { useCallback, useMemo } from 'react';

import type { ServiceTypes } from '~/lib/types';
import type { SuggestedLink } from '../../../lib/AddLinkDialogBox';
import type { PresaveButtonsProps } from '../../types';

import Clickable from '~/src/components/Clickable';
import Text from '~/src/components/Text';
import useHash from '~/src/hooks/useHash';
import getServiceDisplayData from '~/src/lib/getServiceDisplayData';
import { useI18n } from '~/src/lib/i18n';
import { DEFAULT_SERVICES, SERVICES_WITH_PRESAVE } from '../../constants';
import AddPresaveButtonDialog from './AddPresaveButtonDialog';

const AddSubscribeItemButton = ({
  sectionPath,
  onPickService,
  onCreateLink,
  items,
}: {
  items: Required<PresaveButtonsProps>['items'];
  sectionPath: string;
  onPickService: (serviceType: ServiceTypes) => void;
  onCreateLink: (dataPath: string) => void;
}) => {
  const { hasHashParam, backToBeforeFirstHash, setHashParam } = useHash();
  const addLinkHashParam = `subscribeButtons:${sectionPath}:add`;
  const addLinkDialogOpen = hasHashParam(addLinkHashParam);
  const { t } = useI18n('itemEdit');

  const suggestedLinks = useMemo(() => {
    // list of serviceTypes not in the list
    const usedServices = DEFAULT_SERVICES.filter((serviceType) =>
      items.some(
        (item) => item.type === 'subscribe' && item.service === serviceType
      )
    );

    const servicesWithPresave = SERVICES_WITH_PRESAVE;

    return DEFAULT_SERVICES.map<SuggestedLink | undefined>(
      (serviceType, index) => {
        const data = getServiceDisplayData(serviceType);
        if (!data) return;

        const subscribeButtonAlreadyInList =
          !!serviceType && usedServices.includes(serviceType);

        if (subscribeButtonAlreadyInList) {
          return;
        }

        let subtitle = t('presaveButtons2.emailOnly');

        if (servicesWithPresave.includes(serviceType)) {
          subtitle = t('presaveButtons2.emailAndPresave');
        }

        return {
          ...data,
          index,
          type: 'builtIn',
          serviceType: data.key,
          subtitle,
        };
      }
    ).filter(Boolean) as SuggestedLink[];
  }, [items]);

  return (
    <>
      <Clickable
        margin="1.8rem 0 0 0"
        testId="addServiceButton"
        onClick={useCallback(
          () => setHashParam({ [addLinkHashParam]: '' }),
          [setHashParam]
        )}
      >
        <Text size="1.8rem" isBold centered letterSpacing={0.03}>
          {t('actions.addService')}
        </Text>
      </Clickable>
      {addLinkDialogOpen && (
        <AddPresaveButtonDialog
          items={suggestedLinks}
          hashParam={addLinkHashParam}
          onClose={backToBeforeFirstHash}
          onCreateLink={onCreateLink}
          onPickService={onPickService}
        />
      )}
    </>
  );
};

export default AddSubscribeItemButton;