1import {
 2    AlertCard,
 3    Button,
 4    FormLabel,
 5    ScrollArea,
 6} from "@marzneshin/common/components";
 7import { useFieldArray, useFormContext } from "react-hook-form";
 8import { DynamicField } from "@marzneshin/libs/dynamic-field";
 9import { useTranslation } from "react-i18next";
10import { ListPlus, Trash } from "lucide-react";
11
12// TODO: Default back to previous value
13// TODO: Push up animation for adding new headers
14// TODO: Remove animation for removing previous headers
15
16export const HttpHeadersDynamicFields = () => {
17    const { t } = useTranslation();
18    const { control } = useFormContext();
19
20    const { fields, append, remove, replace } = useFieldArray({
21        control,
22        name: "http_headers",
23    });
24
25    return (
26        <div className="mt-2 flex flex-col gap-2">
27            <FormLabel className="hstack justify-between items-center">
28                {t("page.hosts.http_headers")}
29                <div className="hstack gap-1 items-center [*>button]:p-1">
30                    <Button
31                        variant="secondary-destructive"
32                        size="icon"
33                        disabled={!fields.length}
34                        className="p-1"
35                        onClick={() => replace([])}
36                    >
37                        <Trash />
38                    </Button>
39                    <Button
40                        variant="ghost"
41                        size="icon"
42                        className="p-1"
43                        onClick={(e) => {
44                            e.preventDefault();
45                            append({ name: "", value: "" });
46                        }}
47                    >
48                        <ListPlus />
49                    </Button>
50                </div>
51            </FormLabel>
52            <ScrollArea className="p-2 border-2  h-[7rem] max-h-[10rem]  bg-background grid grid-cols-1 gap-2 rounded-md">
53                {fields.length !== 0 ? (
54                    fields.map((field, index) => (
55                        <DynamicField
56                            key={field.id}
57                            fieldIndex={index}
58                            parentFieldName="http_headers"
59                            onRemove={() => remove(index)}
60                        />
61                    ))
62                ) : (
63                    <AlertCard
64                        size="wide-full"
65                        title={t("page.hosts.no-http-headers")}
66                    ></AlertCard>
67                )}
68            </ScrollArea>
69        </div>
70    );
71};