import { Toast } from "bootstrap";
import moment from "moment";

export const toastsInit = () => {
    const wrapper = document.createElement("div");
    wrapper.classList.add("toast-container", "position-fixed", "top-0", "end-0", "p-3", "mt-5");
    const body = document.querySelector("body");
    body.appendChild(wrapper);
    return wrapper;
};

const toast = () => {
    const toastElement = document.createElement("div");
    toastElement.classList.add("toast", "bg-dark", "text-light");
    toastElement.setAttribute("role", "alert");
    return toastElement;
};

const caption = (title) => {
    const captionElement = document.createElement("strong");
    captionElement.classList.add("me-auto");
    captionElement.innerText = title;
    return captionElement;
};

const dateTime = () => {
    const dateTimeElement = document.createElement("small");
    dateTimeElement.classList.add("text-light");
    dateTimeElement.innerText = moment().format("DD.MM HH:mm");
    return dateTimeElement;
};

const closeButton = () => {
    const closeElement = document.createElement("button");
    closeElement.setAttribute("type", "button");
    closeElement.setAttribute("data-bs-dismiss", "toast");
    closeElement.classList.add("btn-close", "btn-close-white");
    return closeElement;
};

const header = (title) => {
    const headerElement = document.createElement("div");
    headerElement.classList.add("toast-header", "bg-dark", "text-light");
    headerElement.appendChild(caption(title));
    headerElement.appendChild(dateTime());
    headerElement.appendChild(closeButton());
    return headerElement;
};

const body = (message) => {
    const bodyElement = document.createElement("div");
    bodyElement.classList.add("toast-body");
    bodyElement.innerText = message;
    return bodyElement;
};

export const showToast = (container, title, message) => {
    const toastElement = toast();
    toastElement.appendChild(header(title));
    toastElement.appendChild(body(message));

    toastElement.addEventListener("hidden.bs.toast", () => {
        container.removeChild(toastElement);
    });

    container.appendChild(toastElement);

    new Toast(toastElement).show();
};