<template>
    <v-card class="bg-gradient" style="height: 100%">
        <div class="wave"/>
        <div class="wave"/>
        <div class="wave"/>
        <v-card-text class="d-flex justify-center align-center h-100">
            <v-card class="bg-grey-darken-3 d-flex flex-column justify-center w-75" :class="isWide ? 'h-100' : 'h-auto'">
                <v-card-title>Вставьте ссылку:</v-card-title>
                <v-card-text class="d-flex flex-column justify-center w-100 h-auto flex-grow-0">
                    <v-text-field class="h-auto flex-grow-0" v-model="url" label="Ссылка" :loading="fetching"/>
                    <v-label v-if="error" class="text-red ml-5">{{ hint }}</v-label>
                    <div class="d-flex align-center justify-center h-auto" :class="isWide ? '' : 'flex-column'">
                        <v-btn class="mt-3 mb-3 mr-5 ml-5" :class="isWide ? '' : 'w-75'" variant="elevated" color="blue" @click="startDownload">Найти</v-btn>
                        <v-btn v-if="downloadAvailable" :href="downloadLink" target="_blank" class="mt-3 mb-3 mr-5 ml-5" :class="isWide ? '' : 'w-75'" variant="elevated" color="blue">Скачать</v-btn>
                    </div>
                </v-card-text>
            </v-card>
        </v-card-text>
    </v-card>
</template>

<script>
import {ref} from "vue";
import axios from "axios";

export default {
    name: "Main",
    data: () => ({
        url: ref(''),
	    fetching: ref(false),
        downloadAvailable: ref(false),
        downloadLink: '',
        hint: ref(''),
        error: ref(false),
        windowHeight: document.documentElement.clientHeight,
        windowWidth: document.documentElement.clientWidth,
        isWide: window.innerWidth >= 460
    }),
    methods: {
        startDownload(){
            this.downloadAvailable = false;
            this.error = false;
            this.fetching = true;
            axios.get(`/download_api?videourl=${this.url}`).then((responce)=>{
                this.fetching = false;
                if (responce.data.error){
                    this.error = true;
                    this.hint = 'Возникла ошибка';
                    console.log(responce.data.error);
                } else if (responce.data.link){
                    this.downloadAvailable = true;
                    this.downloadLink = `/download/${responce.data.link}`;
                }
            }).catch((error)=>{
                this.fetching = false;
                console.log(error);
                this.error = true;
                this.hint = 'Возникла ошибка';
            })
        },
        resizeEventHandler(e) {
            this.windowHeight = document.documentElement.clientHeight;
            this.windowWidth = document.documentElement.clientWidth;
            this.isWide = this.windowWidth >= 460;
        }
    },
    created() {
        window.addEventListener("resize", this.resizeEventHandler);
    },
    mounted() {
        this.resizeEventHandler();
        window.addEventListener("resize", this.resizeEventHandler, { passive: true });
    }
}
</script>


<style scoped>
</style>
