<style lang="scss">
    @import "../../style/pages/shop";
</style>

<script lang="ts">
    import { setContext } from 'svelte'
    import { cartNotifications } from '$utils/stores/shop'
    // Components
    import Cart from '$components/organisms/Cart.svelte'
    import NotificationCart from '$components/molecules/NotificationCart.svelte'

    export let shop: any
    export let locations: any
    export let posters: any
    export let shopProducts: any

    // Locations with an existing poster product
    const shopLocations = locations.filter(({ slug }: any) => {
        if (posters.find((poster: any) => poster.location.slug === slug)) {
            return true
        }
    })

    setContext('shop', {
        shop,
        posters,
        shopLocations,
        shopProducts,
    })
</script>


<Cart />

<div class="notifications">
    {#each $cartNotifications as { id, title, name, image } (id)}
        <NotificationCart
            title={title}
            name={name}
            image={image}
        />
    {/each}
</div>

<slot />


<script context="module" lang="ts">
    import type { LoadEvent, LoadOutput } from '@sveltejs/kit'
    import { fetchAPI } from '$utils/api'

    export async function load ({ fetch }: LoadEvent): Promise<LoadOutput> {
        // Get content from API
        const res = await fetchAPI(`
            query {
                shop {
                    page_heroimage { id }
                }

                location (
                    filter: {
                        has_poster: { _eq: true },
                        status: { _eq: "published" },
                    },
                    sort: "name"
                ) {
                    name
                    slug
                }

                posters: product (
                    filter: { status: { _eq: "published" }}
                ) {
                    name
                    type
                    description
                    details
                    location {
                        name
                        slug
                    }
                    product_id
                    photos_product {
                        directus_files_id {
                            id
                            title
                        }
                    }
                    photos_preview {
                        directus_files_id {
                            id
                            title
                        }
                    }
                }
            }
        `)

        const { data: { shop, location, posters }} = res


        /**
         * Get products data from Swell
         */
        let shopProducts: any

        const shopProductRes = await fetch('/api/swell', {
            method: 'POST',
            body: JSON.stringify({
                action: 'getProducts',
                category: 'posters',
            })
        })
        if (shopProductRes.ok) {
            // Set all products
            const { results } = await shopProductRes.json()
            if (results) {
                shopProducts = results
            }
        }


        return {
            props: {
                shop,
                locations: location,
                posters,
                shopProducts,
            },
        }
    }
</script>