---
// Component Script:
// You can write any JavaScript/TypeScript that you'd like here.
// It will run during the build, but never in the browser.
// All variables are available to use in the HTML template below.

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

import { DoesItAPI } from '~/helpers/api/client.js'
import {
    applyResponseDefaults
} from '~/helpers/astro/request.js'

import Layout from '../layouts/default.astro'
import BgPlayer from '~/src/components/video/bg-player.astro'
import VideoRow from '~/src/components/video/row.astro'
// import LinkButton from '~/components/link-button.vue'

applyResponseDefaults( Astro )

const pagesToGet = 10

const allVideos = []

// Run through out newest video pages and get all the videos
await Promise.all(
  Array.from({ length: pagesToGet }, (_, i) => i + 1).map(async (page) => {

    // console.log('Getting page', page)

    const videoPage = await DoesItAPI.kind.tv( page ).get()

    // Merge in the new videos
    allVideos.push( ...videoPage.items )

    return videoPage
  })
)

// Our initial video for the hero
const heroVideo = allVideos[0]

// Setup video rows data for the page
const videoRows = {
    'video-benchmarks': {
        heading: 'Video Editing Benchmarks',
        matchesCondition: video => {
            return video.tags.includes('benchmark') && video.tags.includes('video-and-motion-tools')
        },
        videos: []
    },
    'music-and-audio-tools': {
        heading: 'Music and DAW Performance',
        matchesCondition: video => {
            return video.tags.includes('music-and-audio-tools')
        },
        videos: []
    },
    'science-and-research-software': {
        heading: 'Science and Research',
        matchesCondition: video => {
            return video.tags.includes('science-and-research-software')
        },
        videos: []
    },
    'photo-and-graphic-tools': {
        heading: 'Photography and Design Compatibility',
        matchesCondition: video => {
            return video.tags.includes('photo-and-graphic-tools')
        },
        videos: []
    },
    'games': {
        heading: 'Gaming Benchmarks',
        matchesCondition: video => {
            return video.tags.includes('benchmark') && video.tags.includes('games')
        },
        videos: []
    },
    'benchmarks': {
        heading: 'Other Benchmark Videos',
        matchesCondition: video => video.tags.includes('benchmark'),
        videos: []
    },
    'performance': {
        heading: 'Performance Videos',
        matchesCondition: video => video.tags.includes('performance'),
        videos: []
    },

    'other': {
        heading: 'More Videos',
        // Always true
        matchesCondition: () => true,
        videos: []
    }
}


// Move videos to relevant categories one at a time
// so that we we don't get duplicates in the rows

for (const video of allVideos) {
    // Look through row conditions to see if video matches
    for (const rowKey in videoRows) {
        if( videoRows[ rowKey ].matchesCondition(video) ) {

            // Add the matching video
            videoRows[ rowKey ].videos.push(video)

            continue
        }
    }
}

---
<Layout
	headOptions={ {
        title: `Benchmarks for ${ global.$config.processorsVerbiage } Processors and Apple Silicon - Does It ARM`,
        description: `Apple Silicon benchmark, performance, and compatibility videos for Macs using the ${ global.$config.processorsVerbiage } processors.`,
        // meta,
        // link,
        // structuredData: this.structuredData,

        // domain,
        pathname: '/benchmarks',
    } }
>

    <main class="container relative md:static overflow-hidden md:overflow-visible pb-16">
        <div class="flex flex-col items-center text-center space-y-12">
            <BgPlayer
                video={ heroVideo }
                classes="absolute overflow-hidden w-2x-screen md:w-full pointer-events-none"
            />

            <div class="page-heading flex justify-start w-full">
                <h1 class="title text-2xl leading-tight mt-12 mb-6">
                    Benchmarks
                </h1>
            </div>

            <div class="line-separator border-white border-t-2 mb-12" />

            <a
                href={ heroVideo.endpoint }
            >
                <div
                    class="relative flex flex-col w-full justify-center items-center space-y-8 py-16 md:pt-0 md:pb-12 md:px-10"
                >
                    <div
                        class="play-circle w-16 h-16 bg-white-2 bg-blur flex justify-center items-center outline-0 rounded-full ease"
                    >
                        <svg
                            viewBox="0 0 18 18"
                            style="width:24px;height:24px;margin-left:3px"
                        >
                            <path
                                fill="currentColor"
                                d="M15.562 8.1L3.87.225c-.818-.562-1.87 0-1.87.9v15.75c0 .9 1.052 1.462 1.87.9L15.563 9.9c.584-.45.584-1.35 0-1.8z"
                            />
                        </svg>
                    </div>
                    <h2 class="title text-lg md:text-2xl font-bold">
                        { heroVideo.name }
                    </h2>
                </div>
            </a>

            <!-- <div
                class="featured-apps-container w-full"
            >
                <hr class="w-full" >
                <div class="featured-apps overflow-x-auto overflow-y-visible whitespace-no-wrap py-2 space-x-2">
                    <LinkButton
                        v-for="app in featuredApps"
                        href={ "app.endpoint" }
                        class="inline-block text-xs rounded-lg py-1 px-2"
                        class-groups={{
                            shadow: 'neumorphic-shadow-inner'
                        }}
                    >{ app.name }</LinkButton>
                </div>
            </div> -->

            { Object.entries(videoRows).map(([ rowKey, row ]) => {
                // Skip rows that don't have enough videos
                if ( row.videos.length < 3 ) return

                return (
                    <div
                        class={ `${ rowKey }-videos w-full max-w-4xl` }
                    >
                        <h2 class="subtitle text-xl md:text-2xl font-bold mb-3">
                            { row.heading }
                        </h2>
                        <VideoRow
                            client:load

                            videos={ row.videos }
                        />
                    </div>
                )
            }) }

        </div>
    </main>

	<!--

	You can also use imported framework components directly in your markup!

	Note: by default, these components are NOT interactive on the client.
	The `:visible` directive tells Astro to make it interactive.

	See https://docs.astro.build/core-concepts/component-hydration/

	-->

</Layout>