---

import { DispatchStateAction } from '@components/types';
import {
  useDeleteControllerModelMutation,
  useDeleteDeviceModelMutation,
  useDeletePadletModelMutation,
} from '@shared/api/controller/client';
import { Box, Button, Modal, Typography } from '@shared/components';
import {
  EventActionTypes,
  useSendClickStreamEvent,
} from '@shared/hooks/useSendClickStreamEvent';
import { SettingsPageTypes } from '@widgets/Settings/types';
import { useTranslation } from 'react-i18next';

type ModelEntity = {
  id?: string;
  name?: string;
};

type Props = {
  model: ModelEntity | undefined;
  isOpen: boolean;
  setIsOpen: DispatchStateAction<boolean>;
  pageType: SettingsPageTypes;
  onDelete?: () => void;
};

export const DeleteModelModal = ({
  model,
  isOpen,
  setIsOpen,
  pageType,
  onDelete,
}: Props) => {
  const { t } = useTranslation('common');

  const { sendEvent: sendDeleteDeviceModelEvent } = useSendClickStreamEvent(
    EventActionTypes.deleteDeviceModel,
  );

  const { sendEvent: sendDeleteControllerModelEvent } =
    useSendClickStreamEvent(EventActionTypes.deleteControllerModel);

  const [deleteDeviceModel] = useDeleteDeviceModelMutation();
  const [deleteControllerModel] = useDeleteControllerModelMutation();
  const [deletePadletModel] = useDeletePadletModelMutation();

  const title = new Map([
    [SettingsPageTypes.device, t('modalTitle.deleteDeviceModal')],
    [SettingsPageTypes.controller, t('modalTitle.deleteControllerModal')],
    [SettingsPageTypes.padlet, t('modalTitle.deletePadletModel')],
  ]);

  const handleClose = () => {
    setIsOpen(false);
  };

  const handleSubmit = async () => {
    if (!model?.id) {
      return;
    }

    let sendEvent: (() => void) | undefined;

    switch (pageType) {
      case SettingsPageTypes.device:
        await deleteDeviceModel({
          modelId: model.id,
        }).unwrap();

        sendEvent = sendDeleteDeviceModelEvent;
        break;

      case SettingsPageTypes.controller:
        await deleteControllerModel({
          modelId: model.id,
        }).unwrap();

        sendEvent = sendDeleteControllerModelEvent;
        break;

      case SettingsPageTypes.padlet:
        await deletePadletModel({
          modelId: model.id,
        }).unwrap();

        break;

      default:
        return;
    }

    handleClose();
    onDelete?.();
    sendEvent?.();
  };

  return (
    <Modal
      open={isOpen}
      title={title.get(pageType)}
      onClose={handleClose}
      actionPrimary={
        <Button onClick={handleSubmit}>{t('buttons.delete')}</Button>
      }
    >
      <Box style={{ padding: '0px 16px' }}>
        <Typography variant='caption2'>
          {t('messages.deleteConfirmation')}{' '}
          {t('controller:model').toLowerCase()} &quot;
          {model?.name}&quot;?
        </Typography>
      </Box>
    </Modal>
  );
};