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