1import {
 2    Checkbox,
 3    FormControl,
 4    FormField,
 5    FormItem,
 6    FormLabel,
 7    FormMessage,
 8    ScrollArea,
 9} from "@marzneshin/components";
10import {
11    useServicesQuery,
12    type ServiceType,
13} from "@marzneshin/features/services";
14import { ServiceCard } from "@marzneshin/features/users";
15import { cn } from "@marzneshin/utils";
16import type { FC } from "react";
17import {
18    useFormContext,
19    type FieldValues,
20    type ControllerRenderProps,
21} from "react-hook-form";
22import { useTranslation } from "react-i18next";
23
24interface ServiceCheckboxCardProps {
25    service: ServiceType;
26    field: ControllerRenderProps<FieldValues, "services">;
27}
28
29const ServiceCheckboxCard: FC<ServiceCheckboxCardProps> = ({
30    service,
31    field,
32}) => {
33    return (
34        <div
35            className={cn(
36                "flex mb-2 flex-row gap-2 items-center p-3 rounded-md border",
37                { "bg-secondary": field.value?.includes(service.id) },
38            )}
39        >
40            <Checkbox
41                checked={field.value?.includes(service.id)}
42                onCheckedChange={(checked) => {
43                    return checked
44                        ? field.onChange([...field.value, service.id])
45                        : field.onChange(
46                            field.value?.filter((value: number) => value !== service.id),
47                        );
48                }}
49            />
50            <FormLabel className="flex flex-row justify-between items-center w-full">
51                <ServiceCard service={service} />
52            </FormLabel>
53        </div>
54    );
55};
56
57export const ServicesField: FC = () => {
58    const form = useFormContext();
59    const { data } = useServicesQuery({ page: 1, size: 100 });
60    const { t } = useTranslation();
61
62    return (
63        <FormField
64            control={form.control}
65            name="services"
66            render={() => (
67                <FormItem>
68                    <FormLabel>{t("services")}</FormLabel>
69                    <ScrollArea className="flex flex-col justify-start px-1 h-full max-h-[20rem]">
70                        {data.entity.map((service) => (
71                            <FormField
72                                key={service.id}
73                                control={form.control}
74                                name="services"
75                                render={({ field }) => (
76                                    <FormItem key={service.id}>
77                                        <FormControl>
78                                            <ServiceCheckboxCard service={service} field={field} />
79                                        </FormControl>
80                                        <FormMessage />
81                                    </FormItem>
82                                )}
83                            />
84                        ))}
85                    </ScrollArea>
86                </FormItem>
87            )}
88        />
89    );
90};