---

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 { DEFAULT_TABLE_PAGINATION_LIMIT } from '@/shared/consts/constants';
import {
  DeviceType,
  SortType,
  useGetControllerTypeV2Query,
  useGetDeviceTypeV2Query,
  useGetPadletTypesQuery,
} from '@shared/api/controller/client';
import { useSetDrawerType } from '@shared/hooks/drawer/useSetDrawerType';
import { DrawerType, DrawerTypes } from '@shared/model/drawer/drawer.types';
import { SettingsPageTypes } from '@widgets/Settings/types';

import { ChangeEvent, MouseEvent, useEffect, useState } from 'react';

const updateDrawerTypes = new Map([
  [SettingsPageTypes.device, DrawerTypes.updateDeviceType],
  [SettingsPageTypes.controller, DrawerTypes.updateControllerType],
  [SettingsPageTypes.padlet, DrawerTypes.updatePadletType],
]);

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

const DEFAULT_PAGE = 1;

export const useTypeTableState = ({ pageType, searchName }: Props) => {
  const setDrawerType = useSetDrawerType();
  const [page, setPage] = useState(DEFAULT_PAGE);
  const [sortType, setSortType] = useState<SortType>('asc');
  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
  const [type, setType] = useState<DeviceType | undefined>(undefined);
  const [customPageValue, setCustomPageValue] = useState(String(page));

  const offset = page > 0 ? (page - 1) * DEFAULT_TABLE_PAGINATION_LIMIT : 0;

  const handleSortTypeChange = (e: MouseEvent<HTMLElement>) => {
    // @ts-ignore
    setSortType(e.target.dataset.value as SortType);
  };

  const { data: deviceData, isFetching: isDeviceDataFetching } =
    useGetDeviceTypeV2Query(
      {
        sortColumn: 'name',
        sortType,
        limit: DEFAULT_TABLE_PAGINATION_LIMIT,
        offset,
        name: searchName,
      },
      { skip: pageType !== SettingsPageTypes.device },
    );

  const { data: controllerData, isFetching: isControllerDataFetching } =
    useGetControllerTypeV2Query(
      {
        sortColumn: 'name',
        sortType,
        limit: DEFAULT_TABLE_PAGINATION_LIMIT,
        offset,
        name: searchName,
      },
      { skip: pageType !== SettingsPageTypes.controller },
    );

  const { data: padletData, isFetching: isPadletDataFetching } =
    useGetPadletTypesQuery(
      {
        sortColumn: 'name',
        sortType,
        limit: DEFAULT_TABLE_PAGINATION_LIMIT,
        offset,
        name: searchName,
      },
      { skip: pageType !== SettingsPageTypes.padlet },
    );

  const deviceTypes = deviceData?.deviceTypes || [];
  const controllerTypes = controllerData?.controllerTypes || [];
  const padletTypes = padletData?.padletTypes || [];

  const types = new Map([
    [SettingsPageTypes.device, deviceTypes],
    [SettingsPageTypes.controller, controllerTypes],
    [SettingsPageTypes.padlet, padletTypes],
  ]);

  const paginationCount = new Map([
    [
      SettingsPageTypes.device,
      deviceData?.total
        ? Math.ceil(deviceData.total / DEFAULT_TABLE_PAGINATION_LIMIT)
        : 0,
    ],
    [
      SettingsPageTypes.controller,
      controllerData?.total
        ? Math.ceil(controllerData.total / DEFAULT_TABLE_PAGINATION_LIMIT)
        : 0,
    ],
    [
      SettingsPageTypes.padlet,
      padletData?.total
        ? Math.ceil(padletData.total / DEFAULT_TABLE_PAGINATION_LIMIT)
        : 0,
    ],
  ]);

  const isDataFetching = new Map([
    [SettingsPageTypes.device, isDeviceDataFetching],
    [SettingsPageTypes.controller, isControllerDataFetching],
    [SettingsPageTypes.padlet, isPadletDataFetching],
  ]);

  const count = paginationCount.get(pageType) || 0;

  const applyCustomPage = () => {
    setPage(Number(customPageValue));
  };

  const onPageChange = (_: ChangeEvent<unknown>, page: number) => {
    setPage(page);
  };

  const handleResetPagination = () => {
    setPage(1);
    setCustomPageValue(String(1));
  };

  const handleSwitchBackPage = () => {
    if (types?.get(pageType)?.length === 1) {
      setPage((prev) => prev - 1);
      setCustomPageValue((prev) => String(Number(prev) - 1));
    }
  };

  const handleOpenUpdateModelDrawer = (type: DeviceType) => {
    setType(type);
    setDrawerType(updateDrawerTypes.get(pageType) as DrawerType);
  };

  const handleOpenDeleteModal = (type: DeviceType) => {
    console.log('hit');
    setType(type);
    setIsDeleteModalOpen(true);
  };
  console.log(isDeleteModalOpen);

  const isActionsVisible = (type: DeviceType): boolean => {
    if (
      (pageType === SettingsPageTypes.device ||
        pageType === SettingsPageTypes.padlet) &&
      type.pinned
    ) {
      return false;
    }

    return true;
  };

  useEffect(() => {
    setCustomPageValue(String(page));
  }, [page]);

  useEffect(() => {
    handleResetPagination();
  }, [searchName]);

  return {
    types,
    count,
    isDataFetching,
    page,
    sortType,

    handleSwitchBackPage,
    handleSortTypeChange,
    handleOpenDeleteModal,
    handleOpenUpdateModelDrawer,
    isActionsVisible,

    onPageChange,
    customPageValue,
    setCustomPageValue,
    applyCustomPage,

    type,
    isDeleteModalOpen,
    setIsDeleteModalOpen,
  };
};