import React from 'react';
import { Box, MainButton, Modal, ModalHeader, Text } from '@nova-hf/ui';
import { ModalProps } from '@nova-hf/ui/umd/ts/src/modal/Modal';
import { Trans, useTranslation } from 'utils/i18n';

type ConfirmDeleteModalProps = {
  name?: string;
  translateKey?: 'default' | 'delegate' | 'department';
  isLoading?: boolean;
  onClose?: () => void;
  onDelete?: () => void;
} & Pick<ModalProps, 'isVisible' | 'onVisibilityChange'>;

export const ConfirmDeleteModal = ({
  isVisible,
  name,
  translateKey = 'default',
  isLoading,
  onClose,
  onDelete,
  onVisibilityChange,
}: ConfirmDeleteModalProps) => {
  const { t } = useTranslation('stillingar');

  return (
    <Modal
      ariaLabel="Modal to confirm delete action"
      isVisible={isVisible}
      onVisibilityChange={onVisibilityChange}
    >
      <Box display="flex" flexDirection="column">
        <ModalHeader
          title={t(`confirmDeleteModal.${translateKey}.header`)}
          eyebrow={t(`confirmDeleteModal.${translateKey}.eyebrow`)}
          color="warning"
          icon="battery"
        />
        <Box marginY={5} flexGrow={1} display="flex" alignItems="center">
          <Text variant="pMediumRegular">
            <Trans i18nKey={`stillingar:confirmDeleteModal.${translateKey}.description`}>
              ..
              <strong>{{ name }}</strong>
              ...
            </Trans>
          </Text>
        </Box>
        <Box display="flex" flexDirection={['column', 'row', 'row']} gap={4}>
          <MainButton
            text={t('confirmDeleteModal.cancelButton')}
            onClick={onClose}
            colorScheme="white"
            dottedShadow="none"
            isDisabled={isLoading}
          />
          <MainButton
            text={t(`confirmDeleteModal.${translateKey}.deleteButton`)}
            onClick={onDelete}
            colorScheme="warning"
            dottedShadow="none"
            isLoading={isLoading}
          />
        </Box>
      </Box>
    </Modal>
  );
};