import { CLOSE_DIALOG_LABEL, CLOSE_TITLE } from "#configuration/strings/code.strings";
import { CLOSE_ICON, EXPAND_ICON, ICON_BASE_CLASS } from "#configuration/icons/element.icons";
import { OVERLAY_DISMISSED, OVERLAY_REQUESTED } from "#core/ids/overlay.ids";
import type { ElementChild } from "#types/element.types";
import { createElement } from "#core/factories/element.factory";
import { emitEvent } from "#core/buses/base.bus";

export const createCloseButton = function createCloseButton(): HTMLButtonElement {
    const button = createElement("button", {
        attributes: { "aria-label": CLOSE_DIALOG_LABEL, title: CLOSE_TITLE, type: "button" },
        children: [createElement("i", { className: `${ICON_BASE_CLASS} ${CLOSE_ICON}` })],
        className: "overlay-close",
    });
    button.addEventListener("click", () => {
        emitEvent({ name: OVERLAY_DISMISSED });
    });
    return button;
};

export const createExpandButton = function createExpandButton(
    className: string,
    tooltip: string,
    title: string,
    content: () => Element,
    label: readonly ElementChild[] = [],
): HTMLButtonElement {
    const button = createElement("button", {
        attributes: { title: tooltip, type: "button" },
        children: [createElement("i", { className: `${ICON_BASE_CLASS} ${EXPAND_ICON}` }), ...label],
        className,
    });
    button.addEventListener("click", () => {
        emitEvent({ content: content(), name: OVERLAY_REQUESTED, title });
    });
    return button;
};