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 {
 6    type UserType,
 7    useUsersUpdateMutation,
 8} from "@marzneshin/features/users";
 9import { useTranslation } from "react-i18next";
10import { fetchUserServices } from "@marzneshin/features/services";
11
12interface UserServicesTableProps {
13    user: UserType;
14}
15
16export const UserServicesTable: FC<UserServicesTableProps> = ({ user }) => {
17    const { mutate: updateUser } = useUsersUpdateMutation();
18    const { selectedRow, setSelectedRow } =
19        useRowSelection(
20            Object.fromEntries(
21                user.service_ids.map(entityId => [String(entityId), true])
22            )
23        );
24    const [selectedService, setSelectedService] = useState<number[]>(user.service_ids);
25    const { t } = useTranslation();
26
27    const handleApply = useCallback(() => {
28        updateUser({ ...user, service_ids: selectedService });
29    }, [selectedService, user, updateUser]);
30
31    return (
32        <div className="flex flex-col gap-4">
33            <SelectableEntityTable
34                fetchEntity={fetchUserServices}
35                columns={columns}
36                primaryFilter="name"
37                existingEntityIds={user.service_ids}
38                entityKey="services"
39                parentEntityKey="users"
40                parentEntityId={user.username}
41                rowSelection={{ selectedRow: selectedRow, setSelectedRow: setSelectedRow }}
42                entitySelection={{ selectedEntity: selectedService, setSelectedEntity: setSelectedService }}
43            />
44
45            <Button onClick={handleApply} disabled={selectedService.length === 0}>
46                {t("apply")}
47            </Button>
48        </div>
49    );
50};