1import {
 2    ClearableTextField,
 3    FormControl,
 4    FormField,
 5    FormItem,
 6    FormLabel,
 7    FormMessage,
 8    Select,
 9    SelectContent,
10    SelectItem,
11    SelectTrigger,
12    SelectValue,
13} from "@marzneshin/common/components";
14import { useEffect, useState } from "react";
15import { useFormContext } from "react-hook-form";
16import { useTranslation } from "react-i18next";
17import { AllowInsecureField, AlpnField, FingerprintField } from ".";
18
19export const SecurityFields = () => {
20    const { t } = useTranslation();
21    const form = useFormContext();
22    const security = form.watch().security;
23
24    const [extraSecurity, setExtraSecurity] = useState<boolean>(
25        ["tls", "inbound_default"].includes(security),
26    );
27    useEffect(() => {
28        setExtraSecurity(["tls", "inbound_default"].includes(security));
29    }, [security, setExtraSecurity]);
30
31    return (
32        <>
33            <FormField
34                control={form.control}
35                name="security"
36                render={({ field }) => (
37                    <FormItem>
38                        <FormLabel>{t("security")}</FormLabel>
39                        <Select
40                            onValueChange={field.onChange}
41                            defaultValue={field.value}
42                        >
43                            <FormControl>
44                                <SelectTrigger>
45                                    <SelectValue placeholder="Select a verified email to display" />
46                                </SelectTrigger>
47                            </FormControl>
48                            <SelectContent>
49                                <SelectItem value="none">None</SelectItem>
50                                <SelectItem value="tls">TLS</SelectItem>
51                                <SelectItem value="inbound_default">
52                                    Inbound Default
53                                </SelectItem>
54                            </SelectContent>
55                        </Select>
56                        <FormMessage />
57                    </FormItem>
58                )}
59            />
60            {extraSecurity && (
61                <div className="w-full flex flex-col gap-2">
62                    <ClearableTextField name="sni" label={t("sni")} />
63                    <div className="flex flex-row w-full gap-2">
64                        <AlpnField />
65                        <FingerprintField />
66                    </div>
67                    <AllowInsecureField />
68                </div>
69            )}
70        </>
71    );
72};