import { FC } from 'react';

import { CopyTypePath } from 'src/types/deeplinks';
import { FormType } from 'src/types/forms';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { formRoutes } from 'src/components/dashboard/form/routes';
import CopyUrlMenuItem from 'src/components/deeplinks/CopyUrlMenuItem';
import MoreMenu from 'src/components/deeplinks/MoreMenu';

const pathTypeByForm = {
  [FormType.FORM]: CopyTypePath.FORM_AVAILABLE,
  [FormType.SURVEY]: CopyTypePath.SURVEY_AVAILABLE,
};

export type FormAvailableMenuProps = {
  id: number;
  type: string;
  isPdfForm: boolean;
};

export const FormAvailableMenu: FC<FormAvailableMenuProps> = props => {
  const { id, type, isPdfForm } = props;

  const { t } = useLokaliseTranslation('forms');

  const menuOptions = [
    {
      id: 'copy-url',
      enabled: true,
      option: (
        <CopyUrlMenuItem
          type={pathTypeByForm[type]}
          route={
            isPdfForm
              ? formRoutes.form.pdfDetail(type, id)
              : formRoutes.form.detail(type, id)
          }
        />
      ),
    },
  ];

  const labelByForm = {
    [FormType.FORM]: t('FORM_MENU'),
    [FormType.SURVEY]: t('SURVEY_MENU'),
  };

  return (
    <MoreMenu
      id={`forms-${id}`}
      label={t(labelByForm[type])}
      menuOptions={menuOptions}
    />
  );
};

export default FormAvailableMenu;