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 } 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    onHostsFilterChange,
 31    onEditingHost,
 32  } = useInbounds();
 33
 34  const { t } = useTranslation();
 35
 36  return (
 37    <Box id="hosts-table" h="full" overflowX={{ base: 'unset', md: 'unset' }} >
 38      <Table
 39        orientation="vertical"
 40      >
 41        <Thead zIndex="docked" position="relative">
 42          <Tr>
 43            <Th
 44              minW="120px"
 45              pl={4}
 46              pr={4}
 47              cursor={'pointer'}
 48              onClick={handleSort.bind(null, filters, 'remark', onHostsFilterChange)}
 49            >
 50              <HStack>
 51                <span>{t('remark')}</span>
 52                <Sort sort={filters.sort} column="remark" />
 53              </HStack>
 54            </Th>
 55            <Th
 56              minW="100px"
 57              cursor={'pointer'}
 58              pr={0}
 59              onClick={handleSort.bind(null, filters, 'address', onHostsFilterChange)}
 60            >
 61              <HStack>
 62                <span>{t('hostsTable.address')}</span>
 63                <Sort sort={filters.sort} column="address" />
 64              </HStack>
 65            </Th>
 66            <Th
 67              minW="100px"
 68              cursor={'pointer'}
 69              pr={0}
 70              onClick={handleSort.bind(null, filters, 'port', onHostsFilterChange)}
 71            >
 72              <HStack>
 73                <span>{t('hostsTable.port')}</span>
 74                <Sort sort={filters.sort} column="port" />
 75              </HStack>
 76            </Th>
 77          </Tr>
 78        </Thead>
 79        <Tbody overflowY="auto">
 80          {hosts?.map((host, i) => {
 81            return (
 82              <Tr
 83                key={i}
 84                className={classNames('interactive', {
 85                  'last-row': i === hosts.length - 1,
 86                })}
 87                onClick={() => onEditingHost(true, host)}
 88              >
 89                <Td minW="140px">
 90                  <div className="flex-status">
 91                    {host.remark}
 92                  </div>
 93                </Td>
 94                <Td width="400px" minW="150px">
 95                  {host.address}
 96                </Td>
 97                <Td width="350px" minW="150px">
 98                  {host.port}
 99                </Td>
100              </Tr>
101            );
102          })}
103          {(hosts?.length === 0 || hosts === undefined) && (
104            <Tr>
105              <Td colSpan={5}>
106                <EmptySection
107                  isFiltered={/* isFiltered */ false}
108                  noObjectT="hostsTable.noHost"
109                  noObjectMatchedT='hostsTable.noHostMatched'
110                  createObjectT="hostsTable.createHosts"
111                />
112              </Td>
113            </Tr>
114          )}
115        </Tbody>
116      </Table>
117      {/* TODO:
118        * <Pagination filters={filters} total={hosts === undefined ? 0 : hosts.length} onHostsFilterChange={onFilterChange} pageSizeManager={pageSizeManagers.hosts} /> 
119        */}
120    </Box>
121  );
122};