<script lang="ts">
    export let cookieName: string
    export let backgroundUrl = ""
    export let textPosition = "center"
    export let background = ""
    let contentShown = false
    const positions ={
        oben: "flex-start",
        mitte: "center",
        unten: "flex-end",
    }
    if (typeof window !== "undefined")
        window.addEventListener("ccAccept", (e) => {
            if ((e as CustomEvent).detail[1] == cookieName) contentShown = true
        })
    //isCookieSet isnt really precise
    function checkCookie(cookieName: string) {
        // Get all cookies
        var allCookies = decodeURIComponent(document.cookie)
        // Split into individual cookies
        var cookies = allCookies.split(";")
        var ccTagCookies: string[] = []
        cookies.forEach((e) => {
            e.includes("ccTags") ? (ccTagCookies = e.split(",")) : void 0
        })
        for (var i = 0; i < ccTagCookies.length; i++) {
            var c = ccTagCookies[i]
            // Trim whitespace
            while (c.charAt(0) == " ") c = c.substring(1)
            // If the cookie's name matches the given name
            if (c == cookieName) return true
        }
        return false
    }

    // Verwendung
    if (typeof window !== "undefined") if (checkCookie(cookieName)) contentShown = true
</script>

{#if contentShown}
    <slot />
{:else}
    <div
        style={{`display: flex; 
         justify-content: center; 
         align-items: ${positions[textPosition]};
         background-image: url(${backgroundUrl});
         background-size: cover; 
         width: 100%;
         align-self: stretch;
         flex-grow: 1;
         `}}
    >
        <div style={{`background-color: rgba(255,255,255,0.7); padding: 20px; background: ${background}; width: 100%;`}}>
            <p>Cookie ist nicht aktiviert. Bitte aktiviere ihn.</p>
        </div>
    </div>
{/if}

<style lang="less"></style>
