1import Editor from "@monaco-editor/react";
 2import { useTheme } from "@marzneshin/features/theme-switch";
 3import { useNodesSettings } from "./use-nodes-settings";
 4import { Button, Awaiting } from "@marzneshin/components";
 5import { useTranslation } from "react-i18next";
 6import type { NodeType } from "../..";
 7
 8export const NodeConfigEditor = ({
 9  entity,
10  backend,
11}: { entity: NodeType; backend: string }) => {
12  const { t } = useTranslation();
13  const { theme } = useTheme();
14  const {
15    payloadValidity,
16    language,
17    config,
18    isFetching,
19    handleConfigSave,
20    handleConfigChange,
21    handleEditorValidation,
22  } = useNodesSettings(entity, backend);
23
24  return (
25    <>
26      <Awaiting
27        isFetching={isFetching}
28        Component={
29          <Editor
30            height="50vh"
31            className="rounded-sm border"
32            defaultLanguage={language}
33            theme={theme === "dark" ? "vs-dark" : "github"}
34            defaultValue={config}
35            onChange={handleConfigChange}
36            onValidate={handleEditorValidation}
37          />
38        }
39      />
40      <Button
41        className="w-full"
42        variant={!payloadValidity ? "destructive" : "default"}
43        onClick={handleConfigSave}
44        disabled={!payloadValidity}
45      >
46        {t("save")}
47      </Button>
48    </>
49  );
50};