---
// Full Astro Component Syntax:
// https://docs.astro.build/core-concepts/astro-components/


import { DoesItAPI } from '~/helpers/api/client.js'
import { getPathPartsFromAstroRequest } from '~/helpers/url.js'
import {
    catchRedirectResponse,
    applyResponseDefaults
} from '~/helpers/astro/request.js'
import { deviceSupportsApp } from '~/helpers/devices.js'
import { getDeviceListingBySlug } from '~/helpers/site-listings.js'


import Layout from '../../layouts/default.astro'
import Search from '~/components/search-stork.vue'
import CarbonInline from '~/components/carbon-inline.vue'
import LinkButton from '~/components/link-button.vue'


// Get type and slug from the request path
// so that we don't have extra parts for
// urls like /:type/:slug/benchmarks
const {
    pathname,
    pathSlug,
    subSlug = 1
 } = getPathPartsFromAstroRequest( Astro.request )


const redirectResponse = await catchRedirectResponse( Astro )

if ( redirectResponse !== null ) {
  return redirectResponse
}

applyResponseDefaults( Astro )

let device

try {
    device = await DoesItAPI.device( pathSlug ).get()
} catch ( error ) {
    if ( error?.response?.status !== 404 ) {
        throw error
    }

    device = getDeviceListingBySlug( pathSlug )
}

if ( device === null || typeof device === 'undefined' ) {
    return Astro.redirect( '/devices' )
}

const rawAppPage = await DoesItAPI.kind( 'app' )( subSlug ).get()


const appPage = {
    ...rawAppPage,

    // Map out paginnation links
    // so we stay in the context of this device
    previousPage: rawAppPage.previousPage.replace( '/kind/app', '/device/' + pathSlug ),
    nextPage: rawAppPage.nextPage.replace( '/kind/app', '/device/' + pathSlug ),

    // Map device support over text/status
    items: rawAppPage.items.map( listing => {
        const listingIsSupported = deviceSupportsApp( device, listing )

        return {
            ...listing,
            text: listingIsSupported ? `✅ Supported on ${ device.name }` : `🚫 Not yet reported working on ${ device.name }`,
        }
    })
}

---
<Layout
    headOptions={{
        title: `Apple Silicon Support for ${ device.name }`,
        description: `Check reported Apple Silicon Support status of apps on ${ device.name }. `,
        // meta,
        // link,
        // structuredData: this.structuredData,

        // domain,
        pathname
    }}
>

     <section class="container py-24">
        <div class="flex flex-col items-center space-y-4">

            <div class="hero">
                <h1 class="title text-3xl md:text-5xl font-hairline leading-tight text-center pb-4">
                    Apple Silicon Support for { device.name }
                </h1>

                <div
                    class="subtitle md:text-xl text-center"
                >
                    { device.description }
                </div>

                <br>

                <div
                    class="subtitle md:text-xl text-center"
                >
                    Supported apps include { appPage.summary.sampleNamesShort }.
                </div>
            </div>

            { !!device.amazonUrl &&
                <div class="flex justify-center py-8">
                    <LinkButton
                        href={ device.amazonUrl }
                        target="_blank"
                        label="ℹ️ Check Pricing"
                    />
                </div>
            }

            <Search
                kind-page={ appPage }

                client:load
            >
                <CarbonInline
                    class="carbon-inline-wide"
                />
            </Search>

            <!-- <ListEndButtons query="query" /> -->

            <!-- <AllUpdatesSubscribe
                class="my-12"
            /> -->

        </div>
    </section>

</Layout>
