---

import { NothingFoundBox } from '@/components/UI/NothingFoundBox';
import { DeleteTypeModal } from '@/features/Settings/modals';
import {
  UpdateControllerTypeDrawer,
  UpdateDeviceTypeDrawer,
  UpdatePadletTypeDrawer,
} from '@/features/drawers';
import { DEFAULT_TABLE_PAGINATION_LIMIT } from '@/shared/consts/constants';
import { Helpers } from '@/shared/lib';
import { Edit2Icon, Trash2Icon } from '@sber-friend/flamingo-icons';
import {
  Box,
  ColumnsProps,
  IconButton,
  Loader,
  PaginationWithInput,
  Row,
  SortTypeDropdown,
  Table,
} from '@shared/components';

import { SettingsPageTypes } from '@widgets/Settings/types';
import { useTranslation } from 'react-i18next';
import { useTypeTableState } from '../controller';

type Props = {
  pageType: SettingsPageTypes;
  searchName?: string;
};

export const TypeTable = ({ pageType, searchName }: Props) => {
  const { t } = useTranslation('common');

  const {
    types,
    count,
    isDataFetching,
    page,
    sortType,

    handleSwitchBackPage,
    handleSortTypeChange,
    handleOpenDeleteModal,
    handleOpenUpdateModelDrawer,
    isActionsVisible,

    onPageChange,
    customPageValue,
    setCustomPageValue,
    applyCustomPage,

    type,
    isDeleteModalOpen,
    setIsDeleteModalOpen,
  } = useTypeTableState({ pageType, searchName });

  const columns: ColumnsProps[] = [
    {
      field: 'name',
      headerName: t('type'),
      icon: (
        <SortTypeDropdown sortType={sortType} onChange={handleSortTypeChange} />
      ),
      visibleIcon: true,
    },
    {
      field: 'actions',
      headerName: t('actions'),
      width: 100,
    },
  ];

  const dataWithActions =
    types.get(pageType)?.map((type) => ({
      ...type,
      id: type.id ?? '',
      actions: isActionsVisible(type) ? (
        <Row>
          <IconButton
            variant='square'
            size='small'
            contained
            onClick={() => {
              handleOpenUpdateModelDrawer(type);
            }}
          >
            <Edit2Icon />
          </IconButton>
          <IconButton
            variant='square'
            size='small'
            contained
            onClick={() => {
              console.log(123123)
              handleOpenDeleteModal(type);
            }}
          >
            <Trash2Icon />
          </IconButton>
        </Row>
      ) : (
        <Box textAlign='center'>-</Box>
      ),
    })) ?? [];

  if (Helpers.isEmpty(types.get(pageType))) {
    return <NothingFoundBox />;
  }

  return (
    <>
      {isDataFetching.get(pageType) ? (
        <Loader isLoading size='large' />
      ) : (
        <>
          <Table rows={dataWithActions} columns={columns} autoColumnWidth />

          <PaginationWithInput
            count={count}
            onChange={onPageChange}
            page={page}
            limit={DEFAULT_TABLE_PAGINATION_LIMIT}
            customPageValue={customPageValue}
            setCustomPageValue={setCustomPageValue}
            applyFn={applyCustomPage}
          />
        </>
      )}

      <DeleteTypeModal
        type={type}
        isOpen={isDeleteModalOpen}
        setIsOpen={setIsDeleteModalOpen}
        pageType={pageType}
        onDelete={handleSwitchBackPage}
      />
      <UpdateDeviceTypeDrawer type={type} />
      <UpdateControllerTypeDrawer type={type} />
      <UpdatePadletTypeDrawer type={type} />
    </>
  );
};


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 { useEffect } from 'react';
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, { isSuccess: isDeviceSuccess }] =
    useDeleteDeviceTypeMutation();
  const [deleteControllerType, { isSuccess: isControllerSuccess }] =
    useDeleteControllerTypeMutation();
  const [deletePadletType, { isSuccess: isPadletSuccess }] =
    useDeletePadletTypeMutation();

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

  const deleteTypes = new Map([
    [SettingsPageTypes.device, deleteDeviceType],
    [SettingsPageTypes.controller, deleteControllerType],
    [SettingsPageTypes.padlet, deletePadletType],
  ]);

  const statusMap = new Map([
    [SettingsPageTypes.device, isDeviceSuccess],
    [SettingsPageTypes.controller, isControllerSuccess],
    [SettingsPageTypes.padlet, isPadletSuccess],
  ]);

  const sendDeleteEvent = new Map([
    [SettingsPageTypes.device, sendDeleteDeviceTypeEvent],
    [SettingsPageTypes.controller, sendDeleteControllerTypeEvent],
  ]);

  const isSuccess = statusMap.get(pageType);

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

  const handleSubmit = () => {
    const deleteType = deleteTypes.get(pageType);

    if (type?.id && deleteType) {
      deleteType({
        typeId: type.id,
      });
    }
  };

  useEffect(() => {
    if (isSuccess) {
      handleClose();
      onDelete?.();

      const sendEvent = sendDeleteEvent.get(pageType);
      if (sendEvent) {
        sendEvent();
      }
    }
  }, [isSuccess, 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:typeName').toLowerCase()} &quot;{type?.name}&quot;?
        </Typography>
      </Box>
    </Modal>
  );
};