import getIcon from './icons';
import { genId } from './helpers';

export function renderToaster() {
    const toaster = document.createElement("div");
    document.body.appendChild(toaster);
    toaster.outerHTML = `
    <div 
        aria-label="Notifications alt+T" 
        tabindex="-1"
        data-expanded="false"
        class="fixed right-4 top-4 z-50 w-80"
        id="toaster"
    ></div>`;
    return toaster;
}

export function renderToast(list, msg, type) {
    const toast = document.createElement("div");
    const id = genId();
    const count = list.children.length;
    const icon = getIcon(type);

    list.prepend(toast);

    toast.outerHTML = `
    <div 
        aria-live="polite"
        aria-atomic="true"
        role="alert"
        class="absolute select-none transition-opacity transition-transform flex items-center w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
        tabindex="0"
        data-toast-id="${id}"
        data-removed="false"
        data-hidden="true"
        data-index="${0}"
        data-front="true"
        data-swiping="false"
        data-swipe-out="false"
        style="--index: 0; --offset: 0px; --initial-height: 0px;"
    >
        ${ icon ? icon : ""}
        <div class="ms-3 text-sm font-normal">
            ${msg}
        </div>
        <button onclick="ToastinTakin.remove('${id}')" type="button" class="ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" data-dismiss-target="#toast-success" aria-label="Close">
            <span class="sr-only">Close</span>
            <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
            </svg>
        </button>
    </div>`;

    return {id, toast};
}