---

import { DispatchStateAction } from '@components/types';
import {
  DeviceType,
  useDeleteControllerTypeMutation,
  useDeleteDeviceTypeMutation,
  useDeletePadletTypeMutation,
} 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 Props = {
  type: DeviceType | undefined;
  isOpen: boolean;
  setIsOpen: DispatchStateAction<boolean>;
  onDelete?: () => void;
  pageType: SettingsPageTypes;
};

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

  const { sendEvent: sendDeleteDeviceTypeEvent } = useSendClickStreamEvent(
    EventActionTypes.deleteDeviceType,
  );

  const { sendEvent: sendDeleteControllerTypeEvent } = useSendClickStreamEvent(
    EventActionTypes.deleteControllerType,
  );

  const [deleteDeviceType] = useDeleteDeviceTypeMutation();
  const [deleteControllerType] = useDeleteControllerTypeMutation();
  const [deletePadletType] = useDeletePadletTypeMutation();

  const title = new Map([
    [SettingsPageTypes.device, t('modalTitle.deleteDeviceType')],
    [SettingsPageTypes.controller, t('modalTitle.deleteControllerType')],
    [SettingsPageTypes.padlet, t('modalTitle.deletePadletType')],
  ]);

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

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

    switch (pageType) {
      case SettingsPageTypes.device:
        await deleteDeviceType({
          typeId: type.id,
        }).unwrap();

        sendDeleteDeviceTypeEvent();
        break;

      case SettingsPageTypes.controller:
        await deleteControllerType({
          typeId: type.id,
        }).unwrap();

        sendDeleteControllerTypeEvent();
        break;

      case SettingsPageTypes.padlet:
        await deletePadletType({
          typeId: type.id,
        }).unwrap();

        break;

      default:
        return;
    }

    handleClose();
    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:typeName').toLowerCase()} &quot;{type?.name}&quot;?
        </Typography>
      </Box>
    </Modal>
  );
};