import { HTMLappendIt, svgNamespace } from "../types";
import { Tragable } from "./tragable";

export class SVGNode extends Tragable implements HTMLappendIt {
    group: SVGElement;
    circle: SVGElement;
    circleText: SVGElement;
    aboveText: SVGElement;
    constructor(node) {
        super();
        // Create the group element
        this.group = document.createElementNS(svgNamespace, 'g');
        this.group.classList.add("PNode");
        this.group.setAttribute('transform', `translate(${node.x}, ${node.y})`);

        // Create the circle
        this.circle = document.createElementNS(svgNamespace, 'circle');
        this.circle.setAttribute('cx', '0');
        this.circle.setAttribute('cy', '0');
        this.circle.setAttribute('r', '25');

        // Create the text inside the circle
        this.circleText = document.createElementNS(svgNamespace, 'text');
        this.circleText.classList.add("circleText");
        this.circleText.setAttribute('x', '0');
        this.circleText.setAttribute('y', '5');
        this.circleText.textContent = '0/1';

        // Create the text above the circle
        this.aboveText = document.createElementNS(svgNamespace, 'text');
        this.aboveText.classList.add("aboveText");
        this.aboveText.setAttribute('x', '0');
        this.aboveText.setAttribute('y', '-35');
        this.aboveText.textContent = node.name;

        // Append the circle and texts to the group
        this.group.appendChild(this.circle);
        this.group.appendChild(this.circleText);
        this.group.appendChild(this.aboveText);
    }

    appendIt(svg) {
        svg.appendChild(this.group);
        this.initTrag(this.group);
    }

    translate(x, y) {
        this.group.setAttribute('transform', `translate(${x}, ${y})`);
    }
    setName(name) {
        this.aboveText.textContent = name;
    }
    setMarks(amount, max) {
        this.circleText.textContent = `${amount}/${max}`;
    }
}