1import {
 2    FormItem,
 3    FormControl,
 4    FormMessage,
 5    FormLabel,
 6    FormField,
 7    Checkbox,
 8    ScrollArea,
 9    EntityFieldCard,
10} from "@marzneshin/common/components";
11import {
12    useInboundsQuery,
13    type InboundType,
14} from "@marzneshin/modules/inbounds";
15import {
16    useFormContext,
17    type FieldValues,
18    type ControllerRenderProps,
19} from "react-hook-form";
20import { useTranslation } from "react-i18next";
21import { cn } from "@marzneshin/common/utils";
22import { Box, GlobeLock } from "lucide-react";
23
24export const InboundCard = ({
25    inbound,
26    field,
27}: {
28    inbound: InboundType;
29    field: ControllerRenderProps<FieldValues, "inbound_ids">;
30}) => {
31    return (
32        <div
33            className={cn(
34                "flex flex-row items-center p-3 space-y-0 space-x-3 rounded-md border",
35                {
36                    "bg-secondary": field.value?.includes(inbound.id),
37                },
38            )}
39        >
40            <Checkbox
41                checked={field.value?.includes(inbound.id)}
42                onCheckedChange={(checked) => {
43                    return checked
44                        ? field.onChange([...field.value, inbound.id])
45                        : field.onChange(
46                            field.value?.filter((value: number) => value !== inbound.id),
47                        );
48                }}
49            />
50            <FormLabel className="flex flex-row justify-between items-center w-full">
51                <EntityFieldCard
52                    FirstIcon={GlobeLock}
53                    SecondIcon={Box}
54                    firstAmount={inbound.protocol}
55                    secondAmount={inbound.node.name}
56                    name={inbound.tag}
57                />
58            </FormLabel>
59        </div>
60    );
61};
62
63export const InboundsField = () => {
64    const { data } = useInboundsQuery({ page: 1, size: 100 });
65    const form = useFormContext();
66    const { t } = useTranslation();
67
68    return (
69        <FormField
70            control={form.control}
71            name="inbound_ids"
72            render={() => (
73                <FormItem>
74                    <FormLabel>{t("inbounds")}</FormLabel>
75                    <ScrollArea className="flex flex-col justify-start  h-full max-h-[20rem]">
76                        {data.entities.map((inbound) => (
77                            <FormField
78                                key={inbound.id}
79                                control={form.control}
80                                name="inbound_ids"
81                                render={({ field }) => (
82                                    <FormItem key={inbound.id} className="mb-1">
83                                        <FormControl>
84                                            <InboundCard inbound={inbound} field={field} />
85                                        </FormControl>
86                                    </FormItem>
87                                )}
88                            />
89                        ))}
90                    </ScrollArea>
91                    <FormMessage />
92                </FormItem>
93            )}
94        />
95    );
96};