1import {
 2    Button,
 3    Card,
 4    CardContent,
 5    ScrollArea,
 6    Sheet,
 7    SheetContent,
 8    SheetHeader,
 9    SheetTitle,
10    Tabs,
11    TabsContent,
12    TabsList,
13    TabsTrigger,
14} from "@marzneshin/components"
15import { FC, useState } from "react"
16import { useTranslation } from "react-i18next"
17import { NodeType, useNodesSettingsMutation } from ".."
18import { useNodesSettingsQuery } from "../services/settings.query";
19import { LogContainer } from "../log";
20import { NodesDetailTable } from "../tables/detail-table";
21import Editor from '@monaco-editor/react';
22import { useTheme } from "@marzneshin/features/theme-switch";
23
24interface NodesSettingsDialogProps {
25    onOpenChange: (state: boolean) => void
26    open: boolean
27    entity: NodeType | null
28}
29
30export const NodesSettingsDialog: FC<NodesSettingsDialogProps> = ({ onOpenChange, open, entity }) => {
31
32    const { t } = useTranslation();
33    const { data } = useNodesSettingsQuery(entity);
34    const [config, setConfig] = useState<any>(data)
35    const mutate = useNodesSettingsMutation();
36    const { theme } = useTheme()
37
38    const handleConfigChange = (newConfig: string | undefined) => {
39        if (newConfig) {
40            try {
41                const parsedConfig = JSON.parse(newConfig);
42                setConfig(parsedConfig);
43            } catch (error) {
44                throw null;
45            }
46        }
47    };
48
49    if (entity) {
50        return (
51            <Sheet open={open} onOpenChange={onOpenChange}>
52                <SheetContent className="sm:min-w-full md:min-w-[600px] " >
53                    <ScrollArea className="h-full">
54                        <SheetHeader>
55                            <SheetTitle>
56                                {t('page.nodes.settings.title')}
57                            </SheetTitle>
58                        </SheetHeader>
59                        <div className="my-4">
60                            <h1 className="font-medium font-header">{t('page.nodes.settings.detail')}</h1>
61                            <NodesDetailTable node={entity} />
62                        </div>
63                        <Tabs className="my-3 w-full h-full" defaultValue="logs">
64                            <TabsList className="w-full">
65                                <TabsTrigger className="w-full" value="logs">{t('logs')}</TabsTrigger>
66                                <TabsTrigger className="w-full" value="config">{t('config')}</TabsTrigger>
67                            </TabsList>
68                            <TabsContent value="logs" className="h-full">
69                                <LogContainer node={entity} />
70                            </TabsContent>
71                            <TabsContent value="config" className="h-full z-51">
72                                <Card>
73                                    <CardContent className="p-2 h-1/2 flex flex-col gap-2">
74                                        <Editor
75                                            height="50vh"
76                                            className="rounded-sm border"
77                                            defaultLanguage="json"
78                                            theme={theme === "dark" ? "vs-dark" : "github"}
79                                            defaultValue={JSON.stringify(data, null, '\t')}
80                                            onChange={handleConfigChange}
81                                        />
82                                        <Button
83                                            className="w-full"
84                                            onClick={() => mutate.mutate({ node: entity, config })}
85                                        >
86                                            {t('save')}
87                                        </Button>
88                                    </CardContent>
89                                </Card>
90                            </TabsContent>
91                        </Tabs>
92                    </ScrollArea>
93                </SheetContent>
94            </Sheet>
95        )
96    }
97}