<template>
    <div>
        <input id="searchbox0" class="searchbox" type="text" v-model="searchbox_str" 
            placeholder="Search String goes here, for example: >5m,c++"
        />
    </div>
</template>

<script lang="ts">
import Vue from "vue";
import * as _ from "lodash";
import * as Dyt from "../dumbyt";

// Vue class for keeping state of the videos.
export default Vue.extend({
    data() {
        return {
            searchbox_str: "",
            Videos: Array<Dyt.Video>()
        }
    },

    // Manually attaching functions to watchers of data.
    watch: {
        // Searchbox updater.
        searchbox_str (s: string) {
            var v = _.debounce((s) => {
                Dyt.search_videos(s).then(e => this.Videos = e);
            }, 400)
            v(s);
        }
    }
});
</script>

<style scoped>
    .searchbox {
        font-size: 1.2em;
        max-width: 70em;
        margin-left: auto;
        margin-right: auto;
        margin-top: 2em;
    }
</style>
