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