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