<script lang="ts">
    import { generalInformation } from "../store"
    import { apiBaseURL } from "../config"

    export let article: PrototypeArticle
    export let details: boolean = false

    const a = article.article
    let cssClasses: string = "p_article"

    cssClasses += a.layout.variant ? " p_article-" + a.layout.variant : ""
    cssClasses += " " + Object.values(a.layout.margin).join(" ")
    cssClasses += " " + Object.values(a.layout.padding).join(" ")

    const getImageAlt = (image): string => {
        if (image.alternateText) {
            return image.alternateText
        }
        if (image.title) {
            return image.title
        }

        return a.content.title
    }

    const getImageSrc = (file) => {
        const url = `${apiBaseURL}prototype_articles/${file.id}/${file.file.path}?filter=l`
        console.log(url, file)
        return url
    }
</script>

{#if a.general.public}
    <article class="{cssClasses}">
        {#if !a.layout.variant || a.layout.variant === "top-left"}
            {#if a.general.categories}
                <div class="p_article-categories">
                    {#each a.general.categories || [] as c}
                        <span class="p_article-category">{c}</span>
                    {/each}
                </div>
            {/if}
            {#if a.content.types.contentMedia.mediaFiles}
                <div class="p_article-images">
                    {#each a.content.types.contentMedia.mediaFiles || [] as image}
                        <!-- {JSON.stringify(image)} -->
                        {#if image?.file?.path}
                            {getImageSrc(image)}
                            <!-- <img 
                                src="{getImageSrc(image?.file)}" 
                                id="{image?.id ? image?.id : ''}" 
                                alt="{getImageAlt(image)}"
                                class="p_article-image"
                            /> -->
                        {/if}
                        {#if image?.caption}
                            <div class="p_article-image-caption">{image?.caption}</div>
                        {/if}
                    {/each}
                </div>
            {/if}

            {#if a.content.title}
                <div class="p_article-title">{a.content.title}</div>
            {/if}
            {#if a.content.subtitle}
                <div class="p_article-subtitle">{a.content.subtitle}</div>
            {/if}
            {#if a.content.types.teaser}
                <div class="p_article-teaser">
                    {@html a.content.types.teaser}
                </div>
            {/if}
            {#if details && a.content.types.details}
                <div class="p_article-details">
                    {@html a.content.types.details}
                </div>
            {/if}
            {#if a.link.url}
                <a href="{a.link.url}" target="{a.link.target}">
                    {a.link.text ? a.link.text : a.link.url}
                </a>
            {/if}
            {#if a.content.types.contentAttachments.attachments}
                <div class="p_article-attachments">
                    {#each a.content.types.contentAttachments.attachments || [] as attachment}
                        <a href="{attachment.file.src}" download="{attachment.file.path}" class="p_article-attachment">
                            {attachment.title ? attachment.title : attachment.file.path}
                        </a>
                    {/each}
                </div>
            {/if}
        {/if}
    </article>
{/if}
