1import {
 2    type SettingsDialogProps,
 3    SettingsDialog,
 4    Tabs,
 5    TabsContent,
 6    TabsList,
 7    TabsTrigger,
 8    AlertCard,
 9} from "@marzneshin/common/components";
10import type { FC } from "react";
11import { useTranslation } from "react-i18next";
12import {
13    NodeBackendType,
14    NodeType,
15    NodesDetailTable,
16    NodesUsageWidget
17} from "@marzneshin/modules/nodes";
18import { NodeBackendSetting } from "./node-backend-setting";
19
20interface NodesSettingsDialogProps extends SettingsDialogProps {
21    entity: NodeType;
22    onClose: () => void;
23}
24
25export const NodesSettingsDialog: FC<NodesSettingsDialogProps> = ({
26    onOpenChange,
27    open,
28    entity,
29    onClose,
30}) => {
31    const { t } = useTranslation();
32
33    return (
34        <SettingsDialog open={open} onClose={onClose} onOpenChange={onOpenChange}>
35            <Tabs defaultValue="config">
36                <TabsList className="w-full">
37                    <TabsTrigger className="w-full" value="config">{t("config")}</TabsTrigger>
38                    <TabsTrigger className="w-full" value="info">{t("info")}</TabsTrigger>
39                </TabsList>
40                <TabsContent value="config">
41                    {entity.backends.length === 0 ? (
42                        <AlertCard
43                            variant="warning"
44                            desc={t('page.nodes.settings.no-backend-alert.desc')}
45                            title={t('page.nodes.settings.no-backend-alert.title')}
46                        />
47                    ) : (
48                        <Tabs
49                            className="my-3 w-full h-full"
50                            defaultValue={entity.backends[0].name}
51                        >
52                            <TabsList className="w-full">
53                                {...entity.backends.map((backend: NodeBackendType) => (
54                                    <TabsTrigger
55                                        className="capitalize w-full"
56                                        value={backend.name}
57                                        key={backend.name}
58                                    >
59                                        {backend.name}
60                                    </TabsTrigger>
61                                ))}
62                            </TabsList>
63                            {...entity.backends.map((backend: NodeBackendType) => (
64                                <TabsContent
65                                    className="w-full"
66                                    value={backend.name}
67                                    key={backend.name}
68                                >
69                                    <NodeBackendSetting node={entity} backend={backend.name} />
70                                </TabsContent>
71                            ))}
72                        </Tabs>
73                    )}
74                </TabsContent>
75                <TabsContent value="info">
76                    <div className="my-4">
77                        <h1 className="font-medium font-header">
78                            {t("page.nodes.settings.detail")}
79                        </h1>
80                        <NodesDetailTable node={entity} />
81                    </div>
82                    <NodesUsageWidget node={entity} />
83                </TabsContent>
84            </Tabs>
85        </SettingsDialog>
86    );
87};