1import { type FC, useCallback, useEffect, useState } from "react";
 2import { Button } from "@marzneshin/components";
 3import { DataTable } 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 type { RowSelectionState } from "@tanstack/react-table";
11import { useServicesQuery } from "@marzneshin/features/services";
12
13interface UserServicesTableProps {
14    user: UserType;
15}
16
17// TODO: #322 Implement pagination for row selectable with appliedable action table
18export const UserServicesTable: FC<UserServicesTableProps> = ({ user }) => {
19    const { mutate: updateUser } = useUsersUpdateMutation();
20    const { data } = useServicesQuery({ page: 1, size: 100 });
21    const [selectedService, setSelectedService] = useState<{
22        [key: number]: boolean;
23    }>({});
24    const { t } = useTranslation();
25
26    useEffect(() => {
27        setSelectedService((prevSelected) => {
28            const updatedSelected: RowSelectionState = { ...prevSelected };
29            for (const serviceId of user.service_ids) {
30                for (const [i, fetchedService] of data.entity.entries()) {
31                    if (fetchedService.id === serviceId) {
32                        updatedSelected[i] = true;
33                    }
34                }
35            }
36            return updatedSelected;
37        });
38    }, [data, user.service_ids]);
39
40    const handleApply = useCallback(() => {
41        const selectedServiceIds = Object.keys(selectedService)
42            .filter((key) => selectedService[Number.parseInt(key)])
43            .map((key) => data.entity[Number.parseInt(key)].id);
44        updateUser({ ...user, service_ids: selectedServiceIds });
45    }, [data, selectedService, user, updateUser]);
46
47    const disabled = Object.keys(selectedService).length < 1;
48
49    return (
50        <div className="flex flex-col gap-4">
51            <DataTable
52                columns={columns}
53                data={data.entity}
54                filteredColumn="name"
55                selectedRow={selectedService}
56                setSelectedRow={setSelectedService}
57            />
58
59            <Button onClick={handleApply} disabled={disabled}>
60                {t("apply")}
61            </Button>
62        </div>
63    );
64};