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