import {
    FormControl,
    FormField,
    FormItem,
    FormLabel,
    FormMessage,
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue
} from "@marzneshin/components";
import { useEffect, useState } from "react";
import { useFormContext } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { AllowInsecureField, AlpnField, FingerprintField, SniField } from ".";

export const SecurityFields = () => {
    const { t } = useTranslation()
    const form = useFormContext()
    const security = form.watch().security

    const [extraSecurity, setExtraSecurity] = useState<boolean>(["tls", "inbound_default"].includes(security))
    useEffect(() => {
        setExtraSecurity(["tls", "inbound_default"].includes(security))
    }, [security, setExtraSecurity])
    return (
        <>
            <FormField
                control={form.control}
                name="security"
                render={({ field }) => (
                    <FormItem>
                        <FormLabel>{t('security')}</FormLabel>
                        <Select onValueChange={field.onChange} defaultValue={field.value}>
                            <FormControl>
                                <SelectTrigger>
                                    <SelectValue placeholder="Select a verified email to display" />
                                </SelectTrigger>
                            </FormControl>
                            <SelectContent>
                                <SelectItem value="none">None</SelectItem>
                                <SelectItem value="tls">TLS</SelectItem>
                                <SelectItem value="inbound_default">Inbound Default</SelectItem>
                            </SelectContent>
                        </Select>
                        <FormMessage />
                    </FormItem>
                )}
            />
            {extraSecurity &&
                <>
                    <SniField />
                    <AlpnField />
                    <FingerprintField />
                    <AllowInsecureField />
                </>
            }
        </>
    )
}