<script>
import Links from "./Links.vue";
import ScheduleTable from "./ScheduleTable.vue";
import {ref} from "vue";
import {useScheduleStore} from "../../stores/schedule.js";

export default {
    name: "AdditionalButtons",
    data: () => ({
        showModal: ref(false),
        afterModal: ref(false),
        afterModalText: '',
        rating: 0,
        comment: ''
    }),
    props: {
        isWide: Boolean
    },
    methods:{
        onShowModal(){
            this.showModal = !this.showModal;
            if (!this.showModal){
                this.rating = 0;
                this.comment = '';
            }
        },
        onShowAfterModal(){
            this.afterModal = !this.afterModal;
        },
        sendRating(){
            axios.post(
                '/api/v1/rating',
                {
                    rate: this.rating,
                    comment: this.comment
                }
            ).then((responce)=>{
                this.onShowModal();
                console.log(responce.data['code']);
                if (responce.data['code'] === 200){
                    this.afterModalText = 'Спасибо за отзыв!';
                } else {
                    this.afterModalText = 'Ошибка: Отзыв не отправился :(';
                }
                this.onShowAfterModal();
            });
        }
    }
}
</script>

<template>
    <div class="w-100 d-flex justify-space-evenly" :class="isWide ? '' : 'flex-column'">
        <v-btn
            class="box-gradient pt-2 pb-2 ma-5 h-auto"
            text="Кинуть копеечку"
            href="https://www.donationalerts.com/r/dhaverd"
            target="_blank"
        />
        <v-btn
            class="box-gradient pt-2 pb-2 ma-5 h-auto"
            text="Оставить отзыв"
            @click="onShowModal"
        />
    </div>
    <v-dialog v-model="showModal" class="align-center" :class="isWide ? 'w-50' : 'w-100 h-100'">
        <v-sheet class="mt-5 mb-5 pa-5 h-auto rounded-lg d-flex flex-column">
            <div class="w-100 d-flex justify-end">
                <v-btn icon="mdi-window-close" elevation="0" @click="onShowModal"/>
            </div>
            <v-label class="text-xl-h6">Оцените канал:</v-label>
            <v-rating v-model="rating" active-color="orange-lighten-1">
                sss
            </v-rating>
            <v-label class="text-xl-h6 mb-2">Оставьте отзыв:</v-label>
            <v-textarea v-model="comment" clearable variant="outlined" label="Что можно улучшить?"/>
            <div class="d-flex justify-center">
                <v-btn class="box-gradient pt-2 pb-2 w-auto h-auto" @click="sendRating">Отправить</v-btn>
            </div>
        </v-sheet>
    </v-dialog>
    <v-dialog v-model="afterModal" class="align-center" :class="isWide ? 'w-50' : 'w-100 h-100'">
        <v-sheet class="mt-5 mb-5 pa-5 h-auto rounded-lg d-flex flex-column">
            <div class="w-100 d-flex justify-end">
                <v-btn icon="mdi-window-close" elevation="0" @click="onShowAfterModal"/>
            </div>
            <v-label class="text-xl-h6">{{afterModalText}}</v-label>
        </v-sheet>
    </v-dialog>
</template>

<style scoped>
.v-dialog {
    align-items: center;
    justify-content: center;
    margin: auto;
}
.v-label {
    color: #000000;
}
</style>
