---

import { DispatchStateAction } from '@components/types';
import { QueryStatus } from '@reduxjs/toolkit/dist/query';
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 { useEffect } from 'react';
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, { status: deviceStatus }] =
    useDeleteDeviceModelMutation();
  const [deleteControllerModel, { status: controllerStatus }] =
    useDeleteControllerModelMutation();
  const [deletePadletModel, { status: padletStatus }] =
    useDeletePadletModelMutation();

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

  const deleteModels = new Map([
    [SettingsPageTypes.device, deleteDeviceModel],
    [SettingsPageTypes.controller, deleteControllerModel],
    [SettingsPageTypes.padlet, deletePadletModel],
  ]);

  const statusMap = new Map([
    [SettingsPageTypes.device, deviceStatus],
    [SettingsPageTypes.controller, controllerStatus],
    [SettingsPageTypes.padlet, padletStatus],
  ]);

  const sendDeleteEvent = new Map([
    [SettingsPageTypes.device, sendDeleteDeviceModelEvent],
    [SettingsPageTypes.controller, sendDeleteControllerModelEvent],
  ]);

  const currentStatus = statusMap.get(pageType);

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

  const handleSubmit = () => {
    const deleteModel = deleteModels.get(pageType);

    if (model?.id && deleteModel) {
      deleteModel({
        modelId: model.id,
      });
    }
  };

  useEffect(() => {
    if (currentStatus === QueryStatus.fulfilled) {
      handleClose();
      onDelete?.();

      const sendEvent = sendDeleteEvent.get(pageType);
      if (sendEvent) {
        sendEvent();
      }
    }
  }, [currentStatus, pageType, onDelete]);

  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>
  );
};