1import {
  2    FormControl,
  3    FormField,
  4    FormItem,
  5    FormLabel,
  6    Input,
  7    Switch,
  8} from "@marzneshin/common/components";
  9import { useFormContext, useWatch } from "react-hook-form";
 10import { useTranslation } from "react-i18next";
 11
 12export const SplitHttpXmuxFields = () => {
 13    const { t } = useTranslation();
 14    const form = useFormContext();
 15    const xmux = useWatch({ name: "splithttp_settings.xmux" });
 16    const isXMuxDisabled = xmux === null;
 17
 18    const updateFieldValue = (path: string, value: any) => {
 19        form.setValue(path, value === "" ? null : value, {
 20            shouldDirty: true,
 21            shouldValidate: true,
 22        });
 23    };
 24
 25    return (
 26        <div>
 27            <FormLabel className="flex items-center justify-between">
 28                {t("page.hosts.xmux-settings")}
 29                <Switch
 30                    checked={!isXMuxDisabled}
 31                    onCheckedChange={(checked) =>
 32                        form.setValue(
 33                            "splithttp_settings.xmux",
 34                            checked ? { xmux: {} } : null,
 35                        )
 36                    }
 37                />
 38            </FormLabel>
 39            {!isXMuxDisabled && (
 40                <div className="grid grid-cols-2 gap-3">
 41                    {[
 42                        "max_concurrency",
 43                        "max_connections",
 44                        "max_reuse_times",
 45                        "max_lifetime",
 46                        "max_request_times",
 47                    ].map((fieldName) => (
 48                        <FormField
 49                            key={fieldName}
 50                            name={`splithttp_settings.xmux.${fieldName}`}
 51                            render={({ field }) => (
 52                                <FormItem>
 53                                    <FormLabel className="flex items-center justify-between capitalize">
 54                                        {t(`${fieldName.replace(/_/g, " ")}`)}
 55                                    </FormLabel>
 56                                    <FormControl>
 57                                        <Input
 58                                            value={field.value}
 59                                            onChange={(e) =>
 60                                                updateFieldValue(
 61                                                    `splithttp_settings.xmux.${fieldName}`,
 62                                                    e.target.value,
 63                                                )
 64                                            }
 65                                            className="w-full"
 66                                        />
 67                                    </FormControl>
 68                                </FormItem>
 69                            )}
 70                        />
 71                    ))}
 72                    <FormField
 73                        key="keep_alive_period"
 74                        name={`splithttp_settings.xmux.keep_alive_period`}
 75                        render={({ field }) => (
 76                            <FormItem>
 77                                <FormLabel className="flex items-center justify-between capitalize">
 78                                    Keep Alive Period
 79                                </FormLabel>
 80                                <FormControl>
 81                                    <Input
 82                                        value={field.value}
 83                                        type="number"
 84                                        onChange={(e) =>
 85                                            updateFieldValue(
 86                                                `splithttp_settings.xmux.keep_alive_period`,
 87                                                e.target.value === ""
 88                                                    ? null
 89                                                    : Number.parseInt(
 90                                                          e.target.value,
 91                                                      ),
 92                                            )
 93                                        }
 94                                        className="w-full"
 95                                    />
 96                                </FormControl>
 97                            </FormItem>
 98                        )}
 99                    />
100                </div>
101            )}
102        </div>
103    );
104};