<template>
    <v-sheet class="bg-grey-darken-3 mt-5 mb-5 rounded-lg w-75 pl-3">
        <p class="neon-text text-xl-h3 text-lg-h3 text-md-h4 text-sm-h4 text-h5 ma-5">Расписание стримов</p>
        <v-skeleton-loader v-if="fetching" type="text" class="bg-grey-darken-3"/>
        <p v-else class="neon-text ma-5 text-xl-h3 text-lg-h3 text-md-h4 text-sm-h4 text-h5"> {{ parseDate(dates[0].current_date) }} - {{ parseDate(dates[1].current_date) }}</p>
        <ScheduleTable :is-wide="isWide"/>
        <p class="neon-text text-xl-h3 text-lg-h3 text-md-h4 text-sm-h4 text-h5 ma-5">Ссылочки</p>
        <Links :is-wide="isWide"/>
        <AdditionalButtons :is-wide="isWide"/>
    </v-sheet>
</template>

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

export default {
    name: "Schedule",
    components: {AdditionalButtons, Links, ScheduleTable},
    data: () => ({
        dates: ref(),
        scheduleStore: useScheduleStore(),
        fetching: true,
        windowHeight: document.documentElement.clientHeight,
        windowWidth: document.documentElement.clientWidth,
        isWide: window.innerWidth >= 460
    }),
    methods: {
        parseDate(date){
            let dateArr = date.split("-");
            return dateArr[2] + "." + dateArr[1];
        },
        myEventHandler(e) {
            this.windowHeight = document.documentElement.clientHeight;
            this.windowWidth = document.documentElement.clientWidth;
            this.isWide = this.windowWidth >= 460;
        }
    },
    created() {
        window.addEventListener("resize", this.myEventHandler);
    },
    mounted() {
        this.scheduleStore.getDates().then(()=>{
            this.dates = this.scheduleStore.dates;
            this.fetching = false;
        });
        this.myEventHandler();
        window.addEventListener("resize", this.myEventHandler, { passive: true });
    }
}
</script>

<style scoped>

@keyframes gradient {
    0% {
        background-position: 0 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }
}

</style>
