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