import Vue from "vue";
import VGC from "./components/Video_Grid.vue";
import SCH from "./components/Search.vue";
import VTBL from "./components/Video_Table.vue";
import CTBL from "./components/Channel_Table.vue";
import CADD from "./components/Channel_Add.vue";
import './index.css';
import { Video, search_videos, Channel, search_channels } from "./dumbyt";

let MainApp = new Vue({
    el: "#app",
    template: `
    <div>
        <SCH v-on:search_complete="search_completed"/>
        <VGC v-bind:Videos="Videos"/>
    </div>
    `,
    components: {
        SCH,
        VGC
    },
    data() {
        return {
            Videos: Array<Video>()
        }
    },
    methods: {
        // Callback for when the search component got results back.
        search_completed(videos : Array<Video>) : void {
            this.Videos = videos;
        }
    }
});

let AdminApp = new Vue({
    el: "#admin_app",
    template: `
    <div>
        <SCH v-on:search_complete="search_completed"/>
        <CADD/>
        <CTBL v-bind:Channels="Channels"/>
        <VTBL v-bind:Videos="Videos"/>
    </div>
    `,
    components: {
        SCH,
        CADD,
        CTBL,
        VTBL
    },
    data() {
        return {
            Videos: Array<Video>(),
            Channels: Array<Channel>()
        }
    },
    methods: {
        // Callback for when the search component got results back.
        search_completed(videos : Array<Video>) : void {
            this.Videos = videos;
        }
    },
    mounted(){
        // Populate the channels field immediatly on start up.
        search_channels("").then(channels => this.Channels = channels);
    }
});