<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, {PropOptions} from "vue";
import * as _ from "lodash";
import * as DumbYT from "../dumbyt";

// Vue class for keeping state of the videos.
export default Vue.extend({
    data() {
        return {
            searchbox_str: "",
        }
    },

    // Manually attaching functions to watchers of data.
    watch: {
        // Searchbox updater with debouncing.
        searchbox_str (s: string) {
            var v = _.debounce((s) => {
                DumbYT.API.search_videos(s).then(videos => {
                    this.$emit('search_complete', videos)
                });
            }, 400)
            v(s);
        }
    }
});
</script>

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