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 } 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}
26
27export const NodesSettingsDialog: FC<NodesSettingsDialogProps> = ({
28    onOpenChange,
29    open,
30    entity,
31}) => {
32    const { t } = useTranslation();
33
34    return (
35        <Sheet open={open} onOpenChange={onOpenChange}>
36            <SheetContent className="sm:min-w-full md:min-w-[600px] ">
37                <ScrollArea className="h-full w-full">
38                    <SheetHeader>
39                        <SheetTitle>{t("page.nodes.settings.title")}</SheetTitle>
40                    </SheetHeader>
41                    <div className="my-4">
42                        <h1 className="font-medium font-header">
43                            {t("page.nodes.settings.detail")}
44                        </h1>
45                        <NodesDetailTable node={entity} />
46                    </div>
47                    <Tabs className="my-3 max-w-full h-full" defaultValue="logs">
48                        <TabsList className="w-full">
49                            <TabsTrigger className="w-full" value="logs">
50                                {t("logs")}
51                            </TabsTrigger>
52                            <TabsTrigger className="w-full" value="config">
53                                {t("config")}
54                            </TabsTrigger>
55                        </TabsList>
56                        <TabsContent value="logs" className="h-full w-full">
57                            <LogContainer node={entity} />
58                        </TabsContent>
59                        <TabsContent value="config" className="h-full z-51">
60                            <Card>
61                                <CardContent className="p-2 h-1/2 flex flex-col gap-2">
62                                    <NodeConfigEditor entity={entity} />
63                                </CardContent>
64                            </Card>
65                        </TabsContent>
66                    </Tabs>
67                </ScrollArea>
68            </SheetContent>
69        </Sheet>
70    );
71};