import "../../css/popup.scss";
import { createElement } from "../functions";
import { createIcon } from "./icon";

function createPopup(title, content, ...buttons) {
    const mask = createElement('div', 'popup-mask');
    const container = createElement('div', 'popup-container');
    const close = () => {
        mask.classList.add('popup-active');
        mask.style.opacity = 0;
        setTimeout(() => mask.remove(), 120);
    };
    container.append(
        createElement('div', header => {
            header.className = 'popup-header';
            if (title instanceof HTMLElement) {
                header.appendChild(title);
            } else {
                header.appendChild(createElement('div', t => t.innerText = title));
            }
            const cancel = createIcon('fa-regular', 'times');
            cancel.addEventListener('click', () => close());
            header.appendChild(cancel);
        }),
        createElement('div', 'popup-body', content),
        createElement('div', 'popup-footer', ...buttons.map(b => {
            const button = createElement('div', 'popup-button');
            button.innerText = b.text;
            if (typeof b.trigger === 'function') {
                button.addEventListener('click', () => {
                    if (b.trigger(container) === false) {
                        return;
                    }
                    close();
                });
            }
        }))
    );
    mask.appendChild(container);
    return mask;
}

export {
    createPopup
}