<template>
    <div class="flex h-screen items-center justify-center p-4">

		<!--App logo-->
		<div v-if="file && !isVideo" class="fixed top-4 left-0 right-0">
			<router-link :to="{name: 'SignIn'}" class="block">
				<!--Image logo-->
				<img v-if="config.app_logo_horizontal" class="mx-auto w-44" :src="$getImage(config.app_logo_horizontal)" :alt="config.app_name" />

				<!--Text logo if image isn't available-->
				<b v-if="! config.app_logo_horizontal" class="mb-4 block text-xl font-bold">
					{{ config.app_name }}
				</b>
			</router-link>
		</div>

		<!--File preview-->
        <div v-if="file" class="w-full text-center">

			<!--App logo-->
			<router-link v-if="isVideo" :to="{name: 'SignIn'}" class="block">
				<!--Image logo-->
				<img v-if="config.app_logo_horizontal" class="mx-auto w-44" :src="$getImage(config.app_logo_horizontal)" :alt="config.app_name" />

				<!--Text logo if image isn't available-->
				<b v-if="! config.app_logo_horizontal" class="mb-4 block text-xl font-bold">
					{{ config.app_name }}
				</b>
			</router-link>

			<!--File item-->
            <ItemGrid v-if="! isVideo" :entry="file" :mobile-handler="false" class="mt-2" />

			<!--Video preview-->
			<div v-if="isVideo" class="mb-4">

				<!--Video preview-->
				<Video :file="file" class="w-full lg:max-w-xl xl:max-w-3xl 2xl:max-w-5xl self-center mx-auto my-10 shadow-xl rounded-lg"/>

				<!--Item Info-->
				<div class="text-center">
					<!--Item Title-->
					<b class="tracking-tight inline-block w-full text-sm md:px-6">
						{{ file.data.attributes.name }}
					</b>

					<!--Item sub line-->
					<div class="flex items-center justify-center">

						<!--File & Image sub line-->
						<small class="block text-xs text-gray-500 dark:text-gray-500">
							{{ file.data.attributes.filesize }}<span class="text-xs text-gray-500 lg:inline-block">, {{ file.data.attributes.created_at }}</span>
						</small>
					</div>
				</div>
			</div>

			<!--Download button-->
            <ButtonBase @click.native="$downloadSelection(file)" button-style="theme" class="mx-auto">
                {{ $t('page_shared.download_file') }}
            </ButtonBase>

            <!--Google Adsense banner-->
            <div v-if="config.allowedAdsense" v-html="config.adsenseBanner01" class="mt-5 min-h-[120px]"></div>
        </div>
    </div>
</template>

<script>
import ButtonBase from '../components/FilesView/ButtonBase'
import Video from "../components/FilePreview/Media/Video"
import ItemGrid from '../components/FilesView/ItemGrid'
import { mapGetters } from 'vuex'
import axios from 'axios'

export default {
    name: 'SharedSingleItem',
    components: {
        ButtonBase,
        ItemGrid,
		Video,
    },
    computed: {
        ...mapGetters(['config']),
		isVideo() {
			return this.file.data.type === 'video'
		}
    },
    data() {
        return {
            file: undefined,
        }
    },
    mounted() {
        axios
            .get(`/api/browse/file/${this.$router.currentRoute.params.token}`)
            .then((response) => {
                this.file = response.data
            })
            .catch((error) => {
                if (error.response.status === 403)
					this.$router.push({ name: 'SharedAuthentication' })
            })
    },
}
</script>
