import { MsgBoxType } from '../types/addInTypes';
import {DisplayType, isDisableable, SelectPopulator} from '../types/HTMLTypes'

/**
 * Displays a message in the specified message container element.
 *
 * Clears any previous message and message type, then sets the new message and type if provided.
 *
 * @param msgBoxId - The ID of the message container element.
 * @param msgType - The type of message to display ("error", "success", or "clear"). Defaults to "clear".
 * @param msgContent - The content of the message to display. Defaults to an empty string.
 */
export const showMessage = (msgBoxId:string, msgType:MsgBoxType = "clear", msgContent:string = "") => {
	const messageContainer = document.getElementById(msgBoxId);
	// Clear previous types and message.
	messageContainer.classList.remove("error");
	messageContainer.classList.remove("success");
	messageContainer.innerHTML = " ";

	if (msgType != "clear") {
		messageContainer.classList.add(msgType);
		messageContainer.innerHTML = msgContent
	}

};

/**
 * Clears an input element and if its a select clear its options.
 * Also disables the input.
 *
 * @param selectorId - The ID of the DOM element to clear and/or disable.
 * @param disabled - Whether to disable the element. Defaults to `true`.
 *
 * If the element is disableable, sets its `disabled` property.
 * If the element is an HTMLSelectElement, removes all its options.
 */
export const clearSelector = (selectorId:string, disabled:boolean = true) => {
	const selector = document.getElementById(selectorId);
	if (isDisableable(selector))
		selector.disabled = disabled;
	if (selector instanceof HTMLSelectElement)
		selector.options.length = 0;
};

/**
 * Sets the CSS `display` property of an HTML element by its ID.
 *
 * @param selectorId - The ID of the HTML element to modify.
 * @param display - The display value to set (of type `DisplayType`).
 *
 * @remarks
 * If the element with the specified ID does not exist in the DOM, this function does nothing.
 */
export const setElementDisplay = (selectorId:string, display:DisplayType) => {
	const selector = document.getElementById(selectorId);
	if (selector) {
		selector.style.display = display;
	}
};

/**
 * Populates a `<select>` HTML element with options based on the provided `SelectPopulator` configuration.
 *
 * @param populator - An object containing configuration for the select element, including:
 *   - `selectId`: The ID of the select element to populate.
 *   - `items`: An array of objects representing the options.
 *   - `keyLabel`: The property name in each item to use as the option value.
 *   - `valueLabel`: The property name in each item to use as the option display text.
 *   - `selectedKey` (optional): The key of the item to be selected by default.
 *   - `emptyOption` (optional): If true, adds a default "Please select an option" entry.
 *
 * @returns The item from `populator.items` that was selected by default, or `null` if none was selected.
 */
export const populateSelect = (populator:SelectPopulator) => {
	const select = document.getElementById(populator.selectId);

	if (populator.emptyOption) 
		select.appendChild(new Option('Please select an option', '-1'));

	let selectedItem:Record<string, string|number|object>|null = null;

	for (const item of populator.items) {
		const option = new Option();
		option.text = item[populator.valueLabel].toString();
		option.value = item[populator.keyLabel].toString();
		option.selected = populator.selectedKey && option.value == populator.selectedKey.toString();

		if (option.selected) selectedItem = item;

		select.appendChild(option);
	}

	return selectedItem;
};