<template>
    <v-app>
        <v-sheet class="bg-gradient h-100 w-100 d-flex justify-center">
            <v-card :elevation="4" class="mt-5 mb-5 align-center justify-center h-auto rounded-lg main-sheet-bg w-75">
                <v-card-title></v-card-title>
                <v-card-text class="h-100 d-flex flex-column align-center justify-center">
                    <v-skeleton-loader type="text" v-if="fetching"></v-skeleton-loader>
                    <div v-if="!fetching">
                        <div class="d-flex flex-column align-center justify-center main-text">
                            <p class="text-h4 text-xl-h1 text-md-h2 text-sm-h3 ma-10">Юрий говорит:</p>
                            <p class="text-h5 text-xl-h2 text-md-h3 text-sm-h4 ma-10 vertical-center align-stretch">{{ currentPhrase }}</p>
                        </div>
                        <div class="d-flex align-center justify-center flex-column">
                            <v-btn
                                variant="elevated"
                                color="#94BBE9FF"
                                @click="reloadPhrase"
                                class="ml-10 mr-10 mt-3 mb-3">
                                Другая фраза
                            </v-btn>
                            <a
                                v-if="currentPhrase === secret"
                                href="/download/basya_answer.docx"
                                class="ml-10 mr-10 mt-3 mb-3">
                                <v-btn variant="elevated">Инструкция</v-btn>
                            </a>
                        </div>
                    </div>
                </v-card-text>
            </v-card>
        </v-sheet>
    </v-app>
</template>

<script>
import {ref} from 'vue';
import axios from "axios";
export default {
    name: "Basya",
    data: () => ({
        secret: 'Для более быстрого результата, можете попробовать самостоятельно исправить ошибку по приложенной инструкции',
        phrases: ref(),
        fetching: true,
        currentPhrase: ref(),
        winWidth: ref(document.documentElement.clientWidth),
        // size: ref(),
        isLess: false
    }),
    methods: {
        reloadPhrase(){
            let newPhrase = this.phrases[Math.floor(Math.random() * this.phrases.length)].phrase;
            if (newPhrase === this.currentPhrase){
                this.reloadPhrase();
            } else {
                this.currentPhrase = newPhrase;
            }
        },
        onResize(e) {
            this.winWidth = ref(document.documentElement.clientWidth);
            console.log(this.winWidth.value);
        }
    },
    mounted() {
        axios
            .get('/api/v1/phrases')
            .then(response => {
                this.phrases = response.data;
                this.reloadPhrase();
                this.fetching = false;
            });
        this.isLess = ref(this.winWidth.value <= 600 ? 'flex-column' : '');
        /*
        this.size = this.winWidth <= 600 ?  'x-small' :
                        this.winWidth > 600 && this.winWidth <= 960 ? 'small' :
                            this.winWidth > 960 && this.winWidth <= 1280 ? '' :
                                this.winWidth > 1280 && this.winWidth <= 1920 ? 'large' :
                                    this.winWidth > 1920 ? 'x-large' : '';
         */
    }
}
</script>

<style scoped>

.bg-gradient {
    background: rgb(238, 174, 202)!important;
    background: radial-gradient(circle, rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%)!important;
}

.main-sheet-bg {
    background-color: #424242;
    color: #E0E0E0;
    text-decoration-color: #E0E0E0;
}

.main-text {
    text-align: center;
}

.vertical-center {
    justify-content: center;
}
</style>
