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

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

        this.container.innerHTML = `<svg width='${width}' height='${height}'></svg>`;
        this.svg = this.container.getElementsByTagName("svg")[0];

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

        this.showFlow = true;
        this.offset = 0;
        requestAnimationFrame(this.drawFlow.bind(this));
    }

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

        this.svg.setAttribute("width", width);
        this.svg.setAttribute("height", height);
    }

    updateConfig(config) {
        switch (config.k) {
            case "background":
                this.container.style.background = config.v;
                break;
            case "flowColor":
                this.flowColor = config.v;
                break;
            case "flowShape":
                this.flowShape = config.v;
                break;
            case "flowCondition":
                this.showFlow = expHandler.GetBoolValue(config.v);
                break;
        }
    }

    drawFlow() {
        if (this.showFlow) {
            const itemWidth = 25;
            const maxItem = Math.ceil(this.width / itemWidth);

            let html = "";
            for (let i = 0; i < maxItem; i++) {
                switch (this.flowShape) {
                    case "triangle":
                        html += `<path d='M${i * itemWidth + this.offset},${this.height / 2 - 5} l8,5 l-8,5 Z' fill='${this.flowColor}' />`;
                        break;
                    case "circle":
                        html += `<circle cx="${i * itemWidth + this.offset}" cy="${this.height / 2}" r="4" fill="${this.flowColor}" />`;
                        break;
                    case "bar":
                        html += `<rect x="${i * itemWidth + this.offset}" y="${this.height / 2 - 2}" width="10" height="4" fill="${this.flowColor}" />`
                        break;
                }

            }
            this.svg.innerHTML = html;

            this.offset++;
            if (this.offset >= itemWidth) {
                this.offset = 0;
            }
        }
        else {
            this.svg.innerHTML = "";
        }

        requestAnimationFrame(this.drawFlow.bind(this));
    }
}