class PipeConnectorComponent {
    render(container, component, width, height, configs) {
        this.container = container;
        this.component = component;

        this.container.innerHTML = `<canvas width='${width}' height='${height}' />`;
        this.canvas = this.container.getElementsByTagName("canvas")[0];
        this.ctx = this.canvas.getContext("2d");

        this.width = width;
        this.height = height;

        for (const config of configs) {
            this.updateConfigWithoutDraw(config);
        }

        this.drawConnector();
    }

    resize(width, height) {
        this.width = width;
        this.height = height;

        this.canvas.setAttribute("width", width);
        this.canvas.setAttribute("height", height);

        this.drawConnector();
    }

    updateConfigWithoutDraw(config) {
        switch (config.k) {
            case "background":
                this.background = config.v;
                break;
            case "pipeWidth":
                this.pipeWidth = config.v;
                break;
            case "connectCount":
                this.connectCount = config.v;
                break;
        }
    }

    updateConfig(config) {
        this.updateConfigWithoutDraw(config);

        this.drawConnector();
    }

    drawConnector() {
        this.ctx.clearRect(0, 0, this.width, this.height);
        this.ctx.imageSmoothingEnabled = true;

        if (this.connectCount === "2") {
            const x1 = 0;
            const x2 = this.width / 2 - this.pipeWidth / 2;
            const x3 = this.width / 2 + this.pipeWidth / 2;

            const y1 = this.height / 2 - this.pipeWidth / 2;
            const y2 = this.height / 2 + this.pipeWidth / 2;

            if (this.background.startsWith('linear-gradient')) {
                const rgbas = this.background.match(/rgba\(.*?\)/g);
                const percents = this.background.match(/[0-9\.\-]+%/g).map(p => Number(p.substring(0, p.length - 1)) / 100);

                const gradient3 = this.ctx.createRadialGradient(x2, y2, this.pipeWidth, x2, y2, 0);
                for (let i = 0; i < rgbas.length; i++) {
                    gradient3.addColorStop(percents[i], rgbas[i]);
                }
                this.ctx.fillStyle = gradient3;
                this.ctx.beginPath();
                this.ctx.arc(x2, y2, this.pipeWidth, Math.PI * 1.45, Math.PI * 2.05);
                this.ctx.lineTo(x2, y2);
                this.ctx.fill();

                const gradient1 = this.ctx.createLinearGradient(x1, y1, x1, y2);
                for (let i = 0; i < rgbas.length; i++) {
                    gradient1.addColorStop(percents[i], rgbas[i]);
                }
                this.ctx.fillStyle = gradient1;
                this.ctx.fillRect(x1, y1, x2, this.pipeWidth);

                const gradient2 = this.ctx.createLinearGradient(x3, y2, x2, y2);
                for (let i = 0; i < rgbas.length; i++) {
                    gradient2.addColorStop(percents[i], rgbas[i]);
                }
                this.ctx.fillStyle = gradient2;
                this.ctx.fillRect(x2, y2, this.pipeWidth, y1);
            }
            else {
                this.ctx.fillStyle = this.background;

                this.ctx.beginPath();
                this.ctx.arc(x2, y2, this.pipeWidth, Math.PI * 1.45, Math.PI * 2.05);
                this.ctx.lineTo(x2, y2);
                this.ctx.fill();

                this.ctx.fillRect(x1, y1, x2, this.pipeWidth);
                this.ctx.fillRect(x2, y2, this.pipeWidth, y1);
            }
        }
        else if (this.connectCount === "3") {
            const x1 = 0;
            const x2 = this.width / 2 - this.pipeWidth / 2;
            const x3 = this.width / 2 + this.pipeWidth / 2;

            const y1 = this.height / 2 - this.pipeWidth / 2;
            const y2 = this.height / 2 + this.pipeWidth / 2;
            const y3 = this.height;

            if (this.background.startsWith('linear-gradient')) {
                const rgbas = this.background.match(/rgba\(.*?\)/g);
                const percents = this.background.match(/[0-9\.\-]+%/g).map(p => Number(p.substring(0, p.length - 1)) / 100);

                const gradient1 = this.ctx.createLinearGradient(x1, y1, x1, y2);
                for (let i = 0; i < rgbas.length; i++) {
                    gradient1.addColorStop(percents[i], rgbas[i]);
                }
                this.ctx.fillStyle = gradient1;
                this.ctx.fillRect(x1, y1, this.width, this.pipeWidth);

                const gradient2 = this.ctx.createLinearGradient(x3, y2, x2, y2);
                for (let i = 0; i < rgbas.length; i++) {
                    gradient2.addColorStop(percents[i], rgbas[i]);
                }
                this.ctx.fillStyle = gradient2;
                this.ctx.fillRect(x2, y2, this.pipeWidth, y3 - y2);
            }
            else {
                this.ctx.fillStyle = this.background;

                this.ctx.fillRect(x1, y1, this.width, this.pipeWidth);
                this.ctx.fillRect(x2, y2, this.pipeWidth, y3 - y2);
            }
        }
        else if (this.connectCount === "4") {
            const x1 = 0;
            const x2 = this.width / 2 - this.pipeWidth / 2;
            const x3 = this.width / 2 + this.pipeWidth / 2;

            const y1 = 0;
            const y2 = this.height / 2 - this.pipeWidth / 2;
            const y3 = this.height / 2 + this.pipeWidth / 2;

            if (this.background.startsWith('linear-gradient')) {
                const rgbas = this.background.match(/rgba\(.*?\)/g);
                const percents = this.background.match(/[0-9\.\-]+%/g).map(p => Number(p.substring(0, p.length - 1)) / 100);

                const gradient2 = this.ctx.createLinearGradient(x3, y1, x2, y1);
                for (let i = 0; i < rgbas.length; i++) {
                    gradient2.addColorStop(percents[i], rgbas[i]);
                }
                this.ctx.fillStyle = gradient2;
                this.ctx.fillRect(x2, y1, this.pipeWidth, this.height);

                const gradient1 = this.ctx.createLinearGradient(x1, y2, x1, y3);
                for (let i = 0; i < rgbas.length; i++) {
                    gradient1.addColorStop(percents[i], rgbas[i]);
                }
                this.ctx.fillStyle = gradient1;
                this.ctx.fillRect(x1, y2, this.width, this.pipeWidth);
            }
            else {
                this.ctx.fillStyle = this.background;

                this.ctx.fillRect(x2, y1, this.pipeWidth, this.height);
                this.ctx.fillRect(x1, y2, this.width, this.pipeWidth);
            }
        }
    }
}