import {Calendar, DatePicker} from 'v-calendar';
import components from './components'

import { Carousel, Pagination, Navigation, Slide } from 'vue3-carousel'

const App = {
    el: '#app',
    delimiters: ['[[', ']]'],
    components: {
        ...components,
        Slide,
        Carousel,
        Pagination,
        Navigation,
        ...{
            VCalendar: Calendar,
            VDatepicker: DatePicker
        },
    },

    computed: {
        player() { return window.aircox.player; },
    },

    data() {
        return {
            carouselBreakpoints: {
                400: {
                    itemsToShow: 1
                },
                600: {
                    itemsToShow: 1.75
                },
                800: {
                    itemsToShow: 3
                },
                1024: {
                    itemsToShow: 4
                },
                1280: {
                    itemsToShow: 4
                },
                1380: {
                    itemsToShow: 5
                },
            }
        }
    }
}

export const PlayerApp = {
    el: '#player',
    delimiters: ['[[', ']]'],
    components: {...components},
}

export default App