"use strict";

import Emel from 'emel';

class ChartStackedBarSet {
	constructor() {
		this.emel = new Emel().emel;
		
		this.el = this.emel(`div[class="stacked-bar-set"]>div[class=legend]+div[class=bars]`);
		this.el_legend = this.el.querySelector(`.legend`);
		
		this.bars = [];
	}
	
	clear() {
		this.el_legend.replaceChildren();
		this.el.querySelector(".bars").replaceChildren();
		this.bars = [];
	}
	
	/**
	 * Adds a new stacked bar to this set of stacked bars.
	 * @param	{number}			i	The index in the list of stacked bars to insert it.
	 * @param	{ChartStackedBar}	bar	The new stacked bar instance to add.
	 * @return	{void}
	 */
	add_bar(i, bar) {
		this.bars.splice(i, 0, bar);
	}
	
	#update_cats() {
		const els_legend_items = [...this.el_legend.querySelectorAll(`.legend-item`)];
		
		// map → flatten → uniq
		let cats = this.bars.map(bar => bar.categories).flat()
			.filter((cat, i) => cats.find(scat => cat.name === scat.name) === i);
		
		for(const cat of cats) {
			const el_legend_item = els_legend_items.find(el => el.dataset.name === cat.name);
			if(typeof el_legend_item === "undefined") {
				// Nope, didn't find it - create it
				el_legend.appendChild(this.#make_legend_item(cat.colour, cat.name));
			}
			else {
				// Yep, we found it - update the names
				el_legend_item.querySelector(".legend-item-spot").style.background = cat.colour;
				el_legend_item.querySelector(".legend-item-text").replaceChildren(document.createTextNode(cat.name));
			}
		}
	}
	
	#make_legend_item(colour, name) {
		return this.emel(`span[class="legend-item"]>span[style="background: ${colour};" class="legend-item-spot"]+span[class="legend-item-text"]{${name}}`);
	}
}

export default ChartStackedBarSet;