---

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={() => {
              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} />
    </>
  );
};