1import {
 2    Card,
 3    CardContent,
 4    ScrollArea,
 5    Sheet,
 6    SheetContent,
 7    SheetHeader,
 8    SheetTitle,
 9    Tabs,
10    TabsContent,
11    TabsList,
12    TabsTrigger,
13} from "@marzneshin/components";
14import { type FC, useEffect } from "react";
15import { useTranslation } from "react-i18next";
16import type { NodeType } from "../..";
17import { LogContainer } from "../../log";
18import { NodesDetailTable } from "../../tables/detail-table";
19import { NodeConfigEditor } from "./node-config-editor";
20
21interface NodesSettingsDialogProps {
22    onOpenChange: (state: boolean) => void;
23    open: boolean;
24    entity: NodeType;
25    onClose: () => void;
26}
27
28export const NodesSettingsDialog: FC<NodesSettingsDialogProps> = ({
29    onOpenChange,
30    open,
31    entity,
32    onClose,
33}) => {
34    const { t } = useTranslation();
35
36    useEffect(() => {
37        if (!open) onClose();
38    }, [open, onClose]);
39
40    return (
41        <Sheet open={open} onOpenChange={onOpenChange}>
42            <SheetContent className="sm:min-w-full md:min-w-[600px] ">
43                <ScrollArea className="h-full w-full">
44                    <SheetHeader>
45                        <SheetTitle>{t("page.nodes.settings.title")}</SheetTitle>
46                    </SheetHeader>
47                    <div className="my-4">
48                        <h1 className="font-medium font-header">
49                            {t("page.nodes.settings.detail")}
50                        </h1>
51                        <NodesDetailTable node={entity} />
52                    </div>
53                    <Tabs className="my-3 max-w-full h-full" defaultValue="logs">
54                        <TabsList className="w-full">
55                            <TabsTrigger className="w-full" value="logs">
56                                {t("logs")}
57                            </TabsTrigger>
58                            <TabsTrigger className="w-full" value="config">
59                                {t("config")}
60                            </TabsTrigger>
61                        </TabsList>
62                        <TabsContent value="logs" className="h-full w-full">
63                            <LogContainer node={entity} />
64                        </TabsContent>
65                        <TabsContent value="config" className="h-full z-51">
66                            <Card>
67                                <CardContent className="p-2 h-1/2 flex flex-col gap-2">
68                                    <NodeConfigEditor entity={entity} />
69                                </CardContent>
70                            </Card>
71                        </TabsContent>
72                    </Tabs>
73                </ScrollArea>
74            </SheetContent>
75        </Sheet>
76    );
77};