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