<template>
    <section class="container py-24">
        <div class="flex flex-col items-center space-y-24">
            <header class="flex flex-col items-center space-y-6 md:px-12">

                <div class="title-container relative">
                    <h1 class="title text-3xl md:text-5xl font-hairline leading-tight text-center">
                        Apple Silicon App Test
                    </h1>
                    <div
                        class="beta-pill absolute h-5 text-xs bg-white-2 flex justify-center items-center outline-0 rounded-full ease px-2"
                        style="top: -1em; right: 0;"
                    >
                        Beta
                    </div>
                </div>

                <h2 class="subtitle md:text-xl text-center">
                    Check for Apple Silicon compatibility for your apps before you buy an M1 Mac.
                </h2>

            </header>

            <div class="app-tester w-full space-y-4 pb-64">

                <div
                    class="relative w-full flex flex-col justify-center items-center space-y-4 pb-8"
                >
                    <button
                        :class="[
                            'rounded-xl text-3xl font-semibold scale-150 bg-darkest neumorphic-shadow focus:outline-none py-4 px-6',
                            isLoadingFiles ? 'shimmer' : ''
                        ]"
                        @click="triggerFilepicker"
                    >{{ isLoadingFiles ? 'Loading Files' : 'Select Apps' }}</button>

                    <template v-if="isLoadingFiles">
                        <div>Loading usually takes about a minute per 500mb</div>
                        <button
                            class="underline"
                            @click="isLoadingFiles = false"
                        >Cancel</button>
                    </template>

                    <small>Supports: Mac Apps, Zip files, and <em>some</em> DMG files. Bigger files take longer.</small>

                    <input
                        ref="file-selector"
                        type="file"
                        accept="application/**"
                        multiple
                        hidden
                        @change="fileInputChanged"
                    >
                    <!-- Directories only: webkitdirectory directory -->
                </div>


                <div
                    v-if="foundFiles.length !== 0"
                    class="w-full text-center"
                >
                    Total Files: {{ foundFiles.length }}
                </div>

                <div
                    v-if="foundFiles.length !== 0"
                    class="app-scans-container relative divide-y divide-gray-700 w-full rounded-lg border border-gray-700 bg-gradient-to-br from-darker to-dark spac-y-3 my-4 px-5"
                >

                    <ul
                        class="results-container divide-y divide-gray-700"
                    >
                        <li
                            v-for="( appScan, index ) in foundFiles"
                            :key="`${appScan.name}-${index}`"
                            :ref="`${appScan.name}-row`"
                            class="relative"
                        >
                            <!-- app.endpoint: {{ app.endpoint }} -->
                            <div
                                :class="[
                                    'flex flex-col justify-center inset-x-0 hover:bg-darkest border-2 border-white border-opacity-0 hover:border-opacity-50 focus:outline-none focus:bg-gray-50 duration-300 ease-in-out rounded-lg space-y-3 -mx-5 pl-5 md:pl-20 pr-6 md:pr-64 py-5',
                                    (appScan.status !== 'finished') ? 'shimmer' : ''
                                ]"
                                style="transition-property: border;"
                            >

                                <div class="absolute hidden left-0 h-12 w-12 rounded-full md:flex items-center justify-center bg-darker">
                                    {{ appScan.name.charAt(0) }}
                                </div>
                                {{ appScan.displayName || appScan.name }}
                                {{ appScan.appVersion ? `- v${appScan.appVersion}` : '' }}
                                {{ appScan.displayAppSize ? `- App ${appScan.displayAppSize}` : '' }}
                                {{ appScan.displayBinarySize ? `- Binary ${appScan.displayBinarySize}` : '' }}
                                <div class="text-sm leading-5 font-bold">
                                    {{ appScan.statusMessage }}
                                </div>

                                <!-- appScan.binarySize: {{ appScan.binarySize }} -->

                                <div
                                    v-if="appScan.binarySize && appScan.binarySize < (10 ^ 6)"
                                    class="text-sm leading-5 font-bold"
                                >
                                    ⚠️ Large Binary - This scan may take a while an/or have issues
                                </div>

                                <details class="w-full pt-6">
                                    <summary class="cursor-pointer mb-3">Details</summary>
                                    <div>
                                        <div v-if="appScan.details.length === 0">No details available</div>
                                        <ul v-else>
                                            <li
                                                v-for="( detail ) in appScan.details"
                                                :key="`${appScan.name}-detail-${detail.label}`"
                                            ><strong>{{ detail.label }}</strong> <span v-html="detail.value" /></li>
                                        </ul>
                                    </div>
                                </details>

                            </div>

                        </li>
                    </ul>

                </div>

            </div>

            <div class="w-full max-w-2xl">
                <details
                    v-for="([ question, answer ], index) in faqs"
                    :key="`question-${index}`"
                    class="w-full"
                >
                    <summary class="cursor-pointer">{{ question }}</summary>
                    <div class="p-4">
                        <p>{{ answer }}</p>
                    </div>
                </details>
            </div>


            <!-- <pre class="w-full">{{ appsBeingScanned }}</pre> -->

            <AllUpdatesSubscribe
                :input-class-groups="{
                    shadow: 'hover:neumorphic-shadow',
                    bg: '',
                    focus: 'bg-transparent neumorphic-shadow pl-8',
                    blur: 'placeholder-white text-center border border-transparent bg-transparent opacity-50 hover:opacity-100 px-3',
                }"
                class="my-12"
            />

        </div>

        <!-- <client-only>
            <FullScreenFileDrop @drop="onDrop" />
        </client-only> -->

    </section>
</template>

<script>
// import axios from 'axios'

// import AppFilesScanner from '~/helpers/app-files-scanner.js'


import LinkButton from '~/components/link-button.vue'
import AllUpdatesSubscribe from '~/components/all-updates-subscribe.vue'

export default {
    // async asyncData () {


    //     return {
    //         allAppSearchLinks,
    //         customSummaryNumbers: getListSummaryNumbers(allList)
    //     }
    // },
    components: {
        // FullScreenFileDrop: () => process.client ? import('~/components/fullscreen-file-drop.vue') : null,
        LinkButton,
        AllUpdatesSubscribe
    },
    data: function () {
        return {
            query: '',
            isLoadingFiles: false,
            appsBeingScanned: []
        }
    },
    computed: {
        foundFiles () {
            return this.appsBeingScanned.filter( appScan => {
                return !appScan.statusMessage.includes('⏭')
            })
        },

        faqs () {
            return [
                [
                    'Non-native Apps (🔶)',
                    `
                    You can try getting the latest version from the developer\'s the download page scan that.
                    You can also request a manual review to determine the current status of the app on Rosetta 2.
                    `
                ],
                [
                    'Why can\'t it tell me if an app will work on Rosetta 2? ',
                    `
                    Currently, Rosetta 2 is a proprietary Apple software that is only available on macOS on Apple Silicon devices.
                    This means there isn't any way to test Rosetta 2 compatibility with an app without a physical Apple Silicon device and so you definitely can't test that with just a website alone... for now...

                    Feel free to signup for email updates.
                    `
                ],
                [
                    'Don\'t all previous Mac Apps work via Rosetta 2 translation? ',
                    `
                    Most apps will work with Rosetta 2 translation well but it's not a perfect technology.
                    Some apps will have various small issues and graphical bugs but will work well enough, a few apps will fail to launch entirely and some apps will runs with vitually no issues and perform even faster than an equivalent Intel-based Mac.
                    For now the best way to determine how well an app will run under Rosetta 2 is by human review.
                    `
                ]
            ]
        },

        title ()  {
            return `Apple Silicon Compatibility`
        },
        description ()  {
            return `Check for Apple Silicon compatibility for any of your apps instantly before you buy an M1 Mac. `
        }
    },
    mounted () {
        this.scanner = null
    },
    methods: {
        log ( thing ) {
            console.log( thing )
        },

        triggerFilepicker () {
            this.isLoadingFiles = true

            // this.watchFileInput()

            this.$refs['file-selector'].dispatchEvent(new MouseEvent('click'))
        },
        async fileInputChanged () {
            this.isLoadingFiles = false
            // console.log('file-selector', this.$refs['file-selector'])

            // Get FileList from input
            const fileList = this.$refs['file-selector'].files

            // If the scanner instance is not set up yet
            // then create and initialize it
            if ( this.scanner === null ) {
                console.log('Initializing scanner instance')

                // Bring in code
                const { default: AppFilesScanner} = await import('~/helpers/app-files-scanner.js')

                // Initialize instance
                this.scanner = new AppFilesScanner({
                    observableFilesArray: this.appsBeingScanned
                })
            }

            // console.log('fileInputChanged files', fileList)

            this.scanner.scan( fileList )
        },
        // async onDrop ( formData, fileList ) {
        //     console.log('Off to the races')

        //     // await new Promise(r => setTimeout(r, 2000))

        //     const formValues = formData.values()

        //     for ( const value of formValues ) {
        //         console.log( 'value', value )
        //     }

        //     // console.log( 'formData', formData.values() ) // Can be posted to server
        //     // console.log( 'fileList', fileList )    // Can get access to things like file name and size

        //     this.scanner.scan( fileList )
        // }
        // async onQueryUpdate ( $event ) {
        //     // console.log('$event', $event)
        //     this.query = $event


        //     return
        // }
    },
    head() {
        return {
            title: this.title,
            meta: [
                // hid is used as unique identifier. Do not use `vmid` for it as it will not work
                {
                    'hid': 'description',
                    'name': 'description',
                    'content': this.description
                },

                // Twitter Card
                {
                    'hid': 'twitter:title',
                    'property':  'twitter:title',
                    'content': this.title
                },
                {
                    'hid': 'twitter:description',
                    'property':  'twitter:description',
                    'content': this.description
                },
                {
                    'property':  'twitter:url',
                    'content': `${process.env.URL}${this.$nuxt.$route.path}`
                },
            ]
        }
    }
}
</script>
