import { Plugin, ChartType, Chart, ChartOptions } from 'chart.js';
import { colors } from 'lib/getRandomColor';

const getOrCreateLegendList = (chart: Chart, id: string, isLonger: boolean) => {
	const legendContainer = document.getElementById(id);
	let listContainer = legendContainer?.querySelector('ul');

	if (!listContainer) {
		listContainer = document.createElement('ul');
		listContainer.style.display = 'flex';
		// listContainer.style.flexDirection = isLonger ? 'column' : 'row';
		listContainer.style.margin = '0';
		listContainer.style.padding = '0';
		listContainer.style.overflowY = 'scroll';
		listContainer.style.justifyContent = isLonger ? 'start' : 'center';
		listContainer.style.alignItems = isLonger ? 'start' : 'center';
		listContainer.style.height = '100%';
		listContainer.style.flexWrap = 'wrap';
		listContainer.style.justifyContent = 'center';

		legendContainer?.appendChild(listContainer);
	}

	return listContainer;
};

export const legend = (id: string, isLonger: boolean): Plugin<ChartType> => {
	return {
		id: 'htmlLegend',
		afterUpdate(chart, args, options: ChartOptions) {
			const ul = getOrCreateLegendList(chart, id || 'legend', isLonger);

			// Remove old legend items
			while (ul.firstChild) {
				ul.firstChild.remove();
			}

			// Reuse the built-in legendItems generator
			const items = chart?.options?.plugins?.legend?.labels?.generateLabels(chart);

			items?.forEach((item, index) => {
				const li = document.createElement('li');
				li.style.alignItems = 'center';
				li.style.cursor = 'pointer';
				li.style.display = 'flex';
				li.style.marginLeft = '10px';
				li.style.marginTop = '5px';

				li.onclick = () => {
					const { type } = chart.config;
					if (type === 'pie' || type === 'doughnut') {
						// Pie and doughnut charts only have a single dataset and visibility is per item
						chart.toggleDataVisibility(index);
					} else {
						chart.setDatasetVisibility(
							item.datasetIndex,
							!chart.isDatasetVisible(item.datasetIndex),
						);
					}
					chart.update();
				};

				// Color box
				const boxSpan = document.createElement('span');
				boxSpan.style.background = item.strokeStyle || colors[0];
				boxSpan.style.borderColor = item?.strokeStyle;
				boxSpan.style.borderWidth = item.lineWidth + 'px';
				boxSpan.style.display = 'inline-block';
				boxSpan.style.minHeight = '20px';
				boxSpan.style.marginRight = '10px';
				boxSpan.style.minWidth = '20px';
				boxSpan.style.borderRadius = '50%';

				if (item.text) {
					// Text
					const textContainer = document.createElement('span');
					textContainer.style.margin = '0';
					textContainer.style.padding = '0';
					textContainer.style.textDecoration = item.hidden ? 'line-through' : '';

					const text = document.createTextNode(item.text);
					textContainer.appendChild(text);

					li.appendChild(boxSpan);
					li.appendChild(textContainer);
					ul.appendChild(li);
				}
			});
		},
	};
};