class CustomChart extends HTMLElement {
	constructor () {
		super();
		this.attachShadow({ mode: "open" });
		this.shadowRoot.innerHTML = `
            <style>
				* {
					box-sizing: border-box;
					font-family: monospace;
				}
				figure {
					margin: 0;
				}
                div {
					max-width: 400px;
					aspect-ratio: 1 / 1;
                }
				figcaption {
					text-align: center;
					margin-top: 10px;
					display: flex;
					flex-direction: column;
				}
            </style>
			<style id="responsive-style" media="not all">
				figure {
					display: flex;
					align-items: center;
					flex-direction: row;
					flex-wrap: nowrap;
					justify-content: flex-start;
				}
				div {
					max-height: 1lh;
				}
				figcaption {
					margin: 0;
					margin-left: 10px;
					display: flex;
					flex-direction: row;
					gap: 1ch;
					font-size: small;
				}
			</style>
			<figure>
				<div>
					<canvas>
				</div>
				<figcaption></figcaption>
			</figure>
        `;
		this.responsiveStyle = this.shadowRoot.querySelector("#responsive-style");
        this.canvas = this.shadowRoot.querySelector("canvas");
		this.caption = this.shadowRoot.querySelector("figcaption");
	}

	set data (data) {
		if (data.chart?.options?.plugins?.title.display) {
			data.chart.options.plugins.title.display = false;
			for (let line of data.chart.options.plugins.title.text) {
				this.caption.innerHTML += `<span>${line}</span>`
			}
		}
		this.canvas.role = "img";
		this.canvas.ariaLabel = data.ariaLabel;
		createChart(this.canvas, data.chart);
		
		
	}

	get data () {
		return null;
	}

	set responsive (breakpoint) {
		this.breakpoint = breakpoint;
		if (breakpoint) {
			this.responsiveStyle.media = `screen and (width <= ${breakpoint})`;
		}
		else {
			this.responsiveStyle.media = "not all";
		}
	}

	get responsive () {
		return this.breakpoint;
	}
}

function createChart (ctx, data) {
	return new Chart(ctx, data);
}

customElements.define("custom-chart", CustomChart);