import Editor from "../Editor";
import { Node } from "@antv/x6";
import { InputNumber, Popover, Tooltip, Button } from "antd";
export default function ExtraModule({
  node,
  extraModules,
}: {
  node: Node;
  extraModules: { type: "image" | "code"; data: Record<string, any> };
}) {
  const handleChange = (key: string, value: number) => {
    node.setData({
      extraModules: {
        ...extraModules,
        data: {
          ...extraModules.data,
          [key]: value,
        },
      },
    });
  };
  const handleDelete = () => {
    node.setData({
      extraModules: undefined,
    }, {
      deep: false
    });
  };
  return extraModules.type === "code" ? (
    <div className="text-14px m-b-8px">
      <Editor
        width={200}
        height={300}
        code={extraModules.data.code}
        language={extraModules.data.language}
        onChange={(code: string) => {
          node.setData({
            extraModules: {
              type: "code",
              data: {
                code,
                language: extraModules.data.language,
              },
            },
          });
        }}
        onLanguageChange={(language: string) => {
          node.setData({
            extraModules: {
              type: "code",
              data: {
                code: extraModules.data.code,
                language,
              },
            },
          });
        }}
        onDelete={handleDelete}
      />
    </div>
  ) : (
    <div className="m-b-8px">
      <Popover
        content={
          <div className="bg-#fff rounded-4px flex items-center py-2px px-4px">
            <span className="text-14px m-r-4px">W</span>
            <InputNumber
              className="w-80px m-r-8px"
              suffix="px"
              min={100}
              value={extraModules.data.width}
              onChange={(val) => handleChange("width", val)}
            />
            <span className="text-14px m-r-4px">H</span>
            <InputNumber
              className="w-80px"
              suffix="px"
              min={100}
              value={extraModules.data.height}
              onChange={(val) => handleChange("height", val)}
            />
            <Tooltip title="删除代码">
              <Button
                icon={<i className="iconfont icon-shanchu" />}
                onClick={handleDelete}
              ></Button>
            </Tooltip>
          </div>
        }
      >
        <img
          src={extraModules.data.imageUrl}
          width={extraModules.data.width}
          height={extraModules.data.height}
        />
      </Popover>
    </div>
  );
}
