1import {
  2  Box,
  3  HStack,
  4  Table,
  5  TableProps,
  6  Tbody,
  7  Td,
  8  Th,
  9  Thead,
 10  Tr,
 11} from '@chakra-ui/react';
 12import classNames from 'classnames';
 13import { FC, useEffect, } from 'react';
 14import { useTranslation } from 'react-i18next';
 15import {
 16  EmptySection,
 17  Sort,
 18  handleSort,
 19} from 'components/table';
 20import { useInbounds, HostType } from 'stores';
 21
 22
 23type NodesTableProps = {
 24  hosts: HostType[];
 25} & TableProps;
 26
 27export const HostsTable: FC<NodesTableProps> = ({ hosts }) => {
 28  const {
 29    hostsFilters: filters,
 30    selectedInbound,
 31    refetchHosts,
 32    onHostsFilterChange,
 33    onEditingHost,
 34    onCreatingHost,
 35  } = useInbounds();
 36
 37  useEffect(() => {
 38    refetchHosts();
 39  }, [selectedInbound]);
 40
 41  const { t } = useTranslation();
 42
 43  return (
 44    <Box id="hosts-table" borderTopStartRadius="0" overflowX={{ base: 'unset', md: 'unset' }} >
 45      <Table
 46        orientation="vertical"
 47      >
 48        <Thead zIndex="docked" position="relative">
 49          <Tr>
 50            <Th
 51              minW="120px"
 52              pl={4}
 53              pr={4}
 54              cursor={'pointer'}
 55              onClick={handleSort.bind(null, filters, 'remark', onHostsFilterChange)}
 56            >
 57              <HStack>
 58                <span>{t('remark')}</span>
 59                <Sort sort={filters.sort} column="remark" />
 60              </HStack>
 61            </Th>
 62            <Th
 63              minW="100px"
 64              cursor={'pointer'}
 65              pr={0}
 66              onClick={handleSort.bind(null, filters, 'address', onHostsFilterChange)}
 67            >
 68              <HStack>
 69                <span>{t('hostsTable.address')}</span>
 70                <Sort sort={filters.sort} column="address" />
 71              </HStack>
 72            </Th>
 73            <Th
 74              minW="100px"
 75              cursor={'pointer'}
 76              pr={0}
 77              onClick={handleSort.bind(null, filters, 'port', onHostsFilterChange)}
 78            >
 79              <HStack>
 80                <span>{t('hostsTable.port')}</span>
 81                <Sort sort={filters.sort} column="port" />
 82              </HStack>
 83            </Th>
 84          </Tr>
 85        </Thead>
 86        <Tbody overflowY="auto">
 87          {hosts?.map((host, i) => {
 88            return (
 89              <Tr
 90                key={i}
 91                className={classNames('interactive', {
 92                  'last-row': i === hosts.length - 1,
 93                })}
 94                onClick={() => onEditingHost(true, host)}
 95              >
 96                <Td minW="140px">
 97                  <div className="flex-status">
 98                    {host.remark}
 99                  </div>
100                </Td>
101                <Td width="400px" minW="150px">
102                  {host.address}
103                </Td>
104                <Td width="350px" minW="150px">
105                  {host.port}
106                </Td>
107              </Tr>
108            );
109          })}
110          {(hosts?.length === 0 || hosts === undefined) && (
111            <Tr>
112              <Td colSpan={5}>
113                <EmptySection
114                  isFiltered={/* isFiltered */ false}
115                  noObjectT="hostsTable.noHost"
116                  noObjectMatchedT='hostsTable.noHostMatched'
117                  createObjectT="addNode"
118                  onCreateObject={onCreatingHost}
119                />
120              </Td>
121            </Tr>
122          )}
123        </Tbody>
124      </Table>
125      {/* TODO:
126        * <Pagination filters={filters} total={hosts === undefined ? 0 : hosts.length} onHostsFilterChange={onFilterChange} pageSizeManager={pageSizeManagers.hosts} /> 
127        */}
128    </Box>
129  );
130};