1import {
  2    CheckboxField,
  3    FormControl,
  4    FormField,
  5    FormItem,
  6    FormLabel,
  7    Input,
  8    Switch,
  9} from "@marzneshin/common/components";
 10import { useFormContext, useWatch } from "react-hook-form";
 11import { useTranslation } from "react-i18next";
 12import { ProtocolField } from "./protocol";
 13import { XudpProxy443Field } from "./xudp-proxy-443";
 14
 15export const MuxSettingsFields = () => {
 16    const { t } = useTranslation();
 17    const form = useFormContext();
 18    const mux_settings = useWatch({ name: "mux_settings" });
 19    const protocol = useWatch({ name: "mux_settings.protocol" });
 20    const isMuxCool = protocol === "mux_cool";
 21    const isMuxSettingsDisabled = mux_settings === null;
 22
 23    const updateFieldValue = (path: string, value: any) => {
 24        form.setValue(path, value === "" ? null : value, {
 25            shouldDirty: true,
 26            shouldValidate: true,
 27        });
 28    };
 29
 30    return (
 31        <FormField
 32            control={form.control}
 33            name="mux_settings"
 34            render={() => (
 35                <>
 36                    <FormLabel className="flex items-center justify-between">
 37                        {t("page.hosts.mux-settings")}
 38                        <Switch
 39                            checked={!isMuxSettingsDisabled}
 40                            onCheckedChange={(checked) =>
 41                                form.setValue(
 42                                    "mux_settings",
 43                                    checked
 44                                        ? {
 45                                              protocol: "mux_cool",
 46                                              mux_cool_settings: {
 47                                                  xudp_proxy_443: "reject",
 48                                              },
 49                                          }
 50                                        : null,
 51                                )
 52                            }
 53                        />
 54                    </FormLabel>
 55
 56                    {!isMuxSettingsDisabled && (
 57                        <>
 58                            <ProtocolField updater={updateFieldValue} />
 59                            <FormItem className="my-2 w-full">
 60                                {isMuxCool ? (
 61                                    <div className="grid grid-cols-2 w-full gap-3">
 62                                        {[
 63                                            "concurrency",
 64                                            "xudp_concurrency",
 65                                        ].map((fieldName) => (
 66                                            <FormField
 67                                                key={fieldName}
 68                                                name={`mux_settings.mux_cool_settings.${fieldName}`}
 69                                                render={({ field }) => (
 70                                                    <FormItem className="w-full">
 71                                                        <FormLabel className="flex items-center justify-between capitalize">
 72                                                            {t(
 73                                                                `${fieldName.replace(/_/g, " ")}`,
 74                                                            )}
 75                                                        </FormLabel>
 76                                                        <FormControl>
 77                                                            <Input
 78                                                                value={
 79                                                                    field.value
 80                                                                }
 81                                                                type="number"
 82                                                                onChange={(e) =>
 83                                                                    updateFieldValue(
 84                                                                        `mux_settings.mux_cool_settings.${fieldName}`,
 85                                                                        e.target
 86                                                                            .value ===
 87                                                                            ""
 88                                                                            ? null
 89                                                                            : Number.parseInt(
 90                                                                                  e
 91                                                                                      .target
 92                                                                                      .value,
 93                                                                              ),
 94                                                                    )
 95                                                                }
 96                                                                className="w-full"
 97                                                            />
 98                                                        </FormControl>
 99                                                    </FormItem>
100                                                )}
101                                            />
102                                        ))}
103                                        <XudpProxy443Field
104                                            updater={updateFieldValue}
105                                        />
106                                    </div>
107                                ) : (
108                                    <div className="flex flex-col  w-full">
109                                        <div className="grid grid-cols-2 gap-3 w-full">
110                                            {[
111                                                "max_connections",
112                                                "max_streams",
113                                                "min_streams",
114                                            ].map((fieldName) => (
115                                                <FormField
116                                                    key={fieldName}
117                                                    name={`mux_settings.sing_box_mux_settings.${fieldName}`}
118                                                    render={({ field }) => (
119                                                        <FormItem>
120                                                            <FormLabel className="flex items-center justify-between capitalize">
121                                                                {t(
122                                                                    `${fieldName.replace(/_/g, " ")}`,
123                                                                )}
124                                                            </FormLabel>
125                                                            <FormControl>
126                                                                <Input
127                                                                    value={
128                                                                        field.value
129                                                                    }
130                                                                    type="number"
131                                                                    onChange={(
132                                                                        e,
133                                                                    ) =>
134                                                                        updateFieldValue(
135                                                                            `mux_settings.sing_box_mux_settings.${fieldName}`,
136                                                                            e
137                                                                                .target
138                                                                                .value ===
139                                                                                ""
140                                                                                ? null
141                                                                                : Number.parseInt(
142                                                                                      e
143                                                                                          .target
144                                                                                          .value,
145                                                                                  ),
146                                                                        )
147                                                                    }
148                                                                    className="w-full"
149                                                                />
150                                                            </FormControl>
151                                                        </FormItem>
152                                                    )}
153                                                />
154                                            ))}
155                                        </div>
156                                        <CheckboxField
157                                            name="mux_settings.sing_box_mux_settings.padding"
158                                            label={t("page.hosts.padding")}
159                                        />
160                                    </div>
161                                )}
162                            </FormItem>
163                        </>
164                    )}
165                </>
166            )}
167        />
168    );
169};