import { register } from "@antv/x6-react-shape";
import { Node } from "@antv/x6";
import CustomInput from "../../CustomInput";
import { useSizeHook, useShapeProps } from "../../../hooks";
const component = ({ node }: { node: Node }) => {
  const { label, text1, text2, text, fill, stroke, opacity } = node.getData();
  const { size, ref } = useSizeHook();
  const {
    fillContent,
    defsContent,
    strokeColor,
    strokeWidth,
    strokeDasharray,
  } = useShapeProps(fill, size, stroke);
  const { width, height } = size || { width: 0, height: 0 };
  return (
    <>
      <div
        className="relative text-0 w-full h-full"
        ref={ref}
        style={{ opacity: opacity / 100 }}
      >
        <svg
          className="w-full h-full absolute top-0 left-0"
          viewBox={`0 0 ${size?.width} ${size?.height}`}
          xmlns="http://www.w3.org/2000/svg"
        >
          <defs>{defsContent}</defs>
          <rect
            x={strokeWidth}
            y={strokeWidth}
            rx={4}
            ry={4}
            width={size?.width - strokeWidth * 2}
            height={size?.height - strokeWidth * 2}
            fill={fillContent}
            stroke={strokeColor}
            strokeDasharray={strokeDasharray}
            strokeWidth={strokeWidth}
          />
          <path
            d={`
              M ${strokeWidth}, 30
              L ${width - strokeWidth}, 30
              M ${strokeWidth}, ${height / 2 + 15}
              L ${width - strokeWidth}, ${height / 2 + 15}
            `}
            stroke={strokeColor}
            strokeWidth={strokeWidth}
          />
        </svg>

        {/* 类名 */}
        <div className="w-full h-30px relative">
          <CustomInput value={label} styles={text} node={node} />
        </div>
        {/* 属性 */}
        <div
          className="w-full relative"
          style={{
            height: (height - 30 - 3 * strokeWidth) / 2,
            marginTop: strokeWidth,
          }}
        >
          <CustomInput
            value={text1}
            styles={{
              ...text,
              textAlign: "left",
              bold: false
            }}
            node={node}
            notSetData={true}
            onChange={(val) => {
              node.setData({ text1: val });
            }}
          />
        </div>
        {/* 方法 */}
        <div
          className="w-full relative"
          style={{
            height: (height - 30 - 3 * strokeWidth) / 2,
            marginTop: strokeWidth,
          }}
        >
          <CustomInput
            value={text2}
            styles={{
              ...text,
              textAlign: "left",
              bold: false
            }}
            node={node}
            notSetData={true}
            onChange={(val) => {
              node.setData({ text2: val });
            }}
          />
        </div>
      </div>
    </>
  );
};

register({
  shape: "custom-react-class1",
  width: 230,
  height: 150,
  effect: ["data"],
  component: component,
});

const class1 = {
  name: "类",
  icon: require("./image/class1.png"),
  node: {
    shape: "custom-react-class1",
    data: {
      label: "类名",
      // 属性
      text1:
        `+ attribute1:type = defaultValue
         + attribute2:type
         - attribute3:type`,
      // 方法
      text2:
        `+ operation1(params):returnType
         - operation2(params)
         - operation3()`,
      text: {
        bold: true
      }
    },
  },
};

export default class1;