import { useModal } from '@material-hu/hooks/useModal';

import HuDialog from '@material-hu/components/design-system/Dialog';

import { useLokaliseTranslation } from 'src/utils/i18n';

type UseConfirmSaveViewModalParams = {
  onConfirm: () => void;
  isLoading: boolean;
};

export const useConfirmSaveViewModal = ({
  onConfirm,
  isLoading,
}: UseConfirmSaveViewModalParams) => {
  const { t } = useLokaliseTranslation('service_management');

  const {
    modal: confirmSaveViewModal,
    showModal: openConfirmSaveViewModal,
    closeModal: closeConfirmSaveViewModal,
  } = useModal(
    () => (
      <HuDialog
        title={t('confirm_save_view_title')}
        textBody={t('confirm_save_view_description')}
        primaryButtonProps={{
          color: 'primary',
          children: t('update'),
          onClick: onConfirm,
          loading: isLoading,
        }}
        secondaryButtonProps={{
          color: 'primary',
          children: t('cancel'),
          onClick: closeConfirmSaveViewModal,
          disabled: isLoading,
        }}
        onClose={closeConfirmSaveViewModal}
      />
    ),
    { fullWidth: true },
  );

  return {
    confirmSaveViewModal,
    openConfirmSaveViewModal,
    closeConfirmSaveViewModal,
  };
};