class Loading extends HTMLElement {
    #template = $("<div id='loader'></div>")

    constructor() {
        super()

        this.#template.html(this.#templateCombine($(this).attr("full")));

        const shadow = this.attachShadow({ mode: "open" })
        shadow.appendChild(this.#template.clone(true)[0])
    }

    #templateCombine(full = false) {
        return this.#templateStyle(full) + "  " + this.#templateContent()
    }

    #templateContent() {

        return `
            <p>loading...</p>
            <div class="spinner">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        `
    }

    #templateStyle(fullscreen = false) {
        let loaderStyle = fullscreen === "true" ? `
                position: absolute;
                height: 100vh;
                width:100vw;
            ` : `
                position: relative;
                height: 100%;
                width:100%;
            ` ;


        return `<style>
        
        #loader {
            top: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height:200px;
            border-radius:8px;
            
            ${loaderStyle}
        }

        p{
            margin-bottom:120px;
            text-align:center;
            font-weight:bold;
            text-transform :capitalize;
        }


        .spinner {
            position: absolute;
            width: 9px;
            height: 9px;
        }

        .spinner div {
            position: absolute;
            width: 50%;
            height: 150%;
            background: #000000;
            transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1%));
            animation: spinner-fzua35 1s calc(var(--delay) * 1s) infinite ease;
        }

        .spinner div:nth-child(1) {
            --delay: 0.1;
            --rotation: 36;
            --translation: 150;
        }

        .spinner div:nth-child(2) {
            --delay: 0.2;
            --rotation: 72;
            --translation: 150;
        }

        .spinner div:nth-child(3) {
            --delay: 0.3;
            --rotation: 108;
            --translation: 150;
        }

        .spinner div:nth-child(4) {
            --delay: 0.4;
            --rotation: 144;
            --translation: 150;
        }

        .spinner div:nth-child(5) {
            --delay: 0.5;
            --rotation: 180;
            --translation: 150;
        }

        .spinner div:nth-child(6) {
            --delay: 0.6;
            --rotation: 216;
            --translation: 150;
        }

        .spinner div:nth-child(7) {
            --delay: 0.7;
            --rotation: 252;
            --translation: 150;
        }

        .spinner div:nth-child(8) {
            --delay: 0.8;
            --rotation: 288;
            --translation: 150;
        }

        .spinner div:nth-child(9) {
            --delay: 0.9;
            --rotation: 324;
            --translation: 150;
        }

        .spinner div:nth-child(10) {
            --delay: 1;
            --rotation: 360;
            --translation: 150;
        }

        @keyframes spinner-fzua35 {

            0%,
            10%,
            20%,
            30%,
            50%,
            60%,
            70%,
            80%,
            90%,
            100% {
                transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1%));
            }

            50% {
                transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1.5%));
            }
        }
    </style>`
    }
}

customElements.define("loading-components", Loading);