import { useState } from 'react';

import { IconVariablePlus } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import Button from '@material-hu/components/design-system/Buttons/Button';
import Menu from '@material-hu/components/design-system/Menu';
import MenuItem from '@material-hu/components/design-system/Menu/components/MenuItem';

import {
  type CertificateAdditionalFieldType,
  certificateAdditionalFieldTypes,
} from 'src/pages/dashboard/Learning/Settings/Certificates/Create/constants';
import {
  getCertificateFieldDisplayLabel,
  getCertificateFieldExampleLabel,
  getCertificateFieldToken,
} from 'src/pages/dashboard/Learning/Settings/Certificates/Create/utils';
import { useLokaliseTranslation } from 'src/utils/i18n';

type CertificateFieldVariablesMenuProps = {
  onInsert: (token: string) => void;
  isOptionDisabled?: (type: CertificateAdditionalFieldType) => boolean;
};

const CertificateFieldVariablesMenu = ({
  onInsert,
  isOptionDisabled,
}: CertificateFieldVariablesMenuProps) => {
  const { t } = useLokaliseTranslation(['learning', 'backoffice_only']);
  const { palette } = useTheme();
  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);

  const handlePick = (type: CertificateAdditionalFieldType) => {
    if (isOptionDisabled?.(type)) return;
    onInsert(getCertificateFieldToken(t, type));
    setAnchorEl(null);
  };

  return (
    <>
      <Button
        variant="secondary"
        startIcon={<IconVariablePlus size={16} />}
        onClick={e => setAnchorEl(e.currentTarget)}
        sx={{ flexShrink: 0 }}
        aria-expanded={Boolean(anchorEl)}
        aria-haspopup="true"
      >
        {t('backoffice_only:insert_variable')}
      </Button>
      <Menu
        open={Boolean(anchorEl)}
        anchorEl={anchorEl}
        onClose={() => setAnchorEl(null)}
        position="right"
      >
        {certificateAdditionalFieldTypes.map(fieldType => {
          const disabled = isOptionDisabled?.(fieldType) ?? false;
          return (
            <MenuItem
              key={fieldType}
              disabled={disabled}
              onClick={() => handlePick(fieldType)}
              sx={{ alignItems: 'flex-start', py: 1.5 }}
            >
              <Stack
                sx={{ alignItems: 'flex-start', gap: 0.25, maxWidth: 360 }}
              >
                <Typography
                  variant="globalS"
                  sx={{ fontWeight: 'fontWeightSemiBold' }}
                >
                  {getCertificateFieldDisplayLabel(t, fieldType)}
                </Typography>
                <Typography
                  variant="globalXS"
                  sx={{ color: palette.new.text.neutral.lighter }}
                >
                  {getCertificateFieldExampleLabel(t, fieldType)}
                </Typography>
              </Stack>
            </MenuItem>
          );
        })}
      </Menu>
    </>
  );
};

export default CertificateFieldVariablesMenu;
