1import { type FC, useCallback, useState } from "react";
 2import { Button } from "@marzneshin/components";
 3import { SelectableEntityTable, useRowSelection } from "@marzneshin/features/entity-table";
 4import { columns } from "./columns";
 5import { type ServiceType, useServicesUpdateMutation, fetchSelectableServiceInbounds } from "@marzneshin/features/services";
 6import { useTranslation } from "react-i18next";
 7
 8interface ServiceInboundsTableProps {
 9    service: ServiceType;
10}
11
12export const ServiceInboundsTable: FC<ServiceInboundsTableProps> = ({
13    service,
14}) => {
15    const { mutate: updateService } = useServicesUpdateMutation();
16    const { selectedRow, setSelectedRow } =
17        useRowSelection(Object.fromEntries(service.inbound_ids.map(entityId => [String(entityId), true])));
18    const [selectedInbound, setSelectedInbound] = useState<number[]>(service.inbound_ids);
19    const { t } = useTranslation();
20
21    const handleApply = useCallback(() => {
22        updateService({ id: service.id, name: service.name, inbound_ids: selectedInbound });
23    }, [selectedInbound, service, updateService]);
24
25    const disabled = Object.keys(selectedRow).length < 1;
26
27    return (
28        <div className="flex flex-col gap-4">
29            <SelectableEntityTable
30                columns={columns}
31                entityKey="inbounds"
32                parentEntityKey="services"
33                parentEntityId={service.id}
34                existingEntityIds={service.inbound_ids}
35                fetchEntity={fetchSelectableServiceInbounds}
36                primaryFilter="tag"
37                rowSelection={{ selectedRow: selectedRow, setSelectedRow: setSelectedRow }}
38                entitySelection={{ selectedEntity: selectedInbound, setSelectedEntity: setSelectedInbound }}
39            />
40
41            <Button onClick={handleApply} disabled={disabled}>
42                {t("apply")}
43            </Button>
44        </div>
45    );
46};