<template>
    <div>
        <div>{{Videos}}</div>
    </div>
</template>

<script lang="ts">
import Vue from "vue";
import Axios from "axios";

class Video {
    public Title: string;
    public Description: string;
    public ID: string;
    public Thumbnail: string;
    public Channel: string;
    public Seconds: number;
    public Tags: Array<string>;
    public URL: string;

    constructor(v: any){
        this.Title = v.title;
        this.Description = v.description;
        this.ID = v.id;
        this.Thumbnail = v.thumbnail;
        this.Channel = v.channel;
        this.Seconds = v.seconds;
        this.Tags = v.tags;
        this.URL = "https://www.youtube.com/watch?v=" + v.id;
    }
}

async function get_videos(): Promise<Array<Video>> {
    // How many chars at most for the description.
    const maxcharsdescriptionfield = 100;

    // Temporary holder for videos.
    let Videos : Array<Video> = [];

    // Ask server for videos.
    let resp = await Axios.get('http://localhost:62214/api/Videos').catch(e => console.log(e));
    console.log("Got reply!");

    // Handle all our nulls.
    if (resp == null || resp.data == null)
        console.log("server /api/videos return is null");
    else {
        // Parse our videos.
        resp.data.forEach((v: any) => {
            // Trim description if needed.
            if (v.description.length > maxcharsdescriptionfield) {
                v.description = v.description.substring(0, maxcharsdescriptionfield) + " ...";
            }

            // Add it to our array
            Videos.push(new Video(v));
        });
    }
    
    // Send back the resulting videos.
    return Promise.resolve(Videos);
}

export default Vue.extend({
    data() {
        return {
            Videos: Array<Video>()
        }
    },
    methods: {
        
    },

    // Ugh, vue doesn't have async support for computed, wow ...
    mounted() { get_videos().then(e => this.Videos = e ) }
});
</script>
