<template>
    <div>
        <h1>Ivago</h1>
        <input
            v-model="query"
            v-on:keyup.enter="search"
            type="text"
            placeholder="Street..." />
        <div id="scroll-list">
            <ul v-if="msg === ''">
                <li
                    v-for="item in items"
                    v-bind:key="`${item.name} (${item.city})`" >
                    {{ item.name }} ({{ item.city }})
                </li>
            </ul>
            <p v-else>{{ msg }}</p>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { Street, search as ivagoSearch } from '../api/ivago'

export default defineComponent({
    name: 'Ivago',
    data () {
        return {
            items: [] as Street[],
            msg: '',
            query: ''
        }
    },
    methods: {
        search () {
            this.items = []
            this.msg = 'Loading...'

            if (this.query === '') {
                this.msg = ''
                return
            }

            ivagoSearch(this.query)
                .then((res: Street[]) => {
                    this.items = res
                    this.msg = ''
                })
        }
    }
})
</script>

<style scoped>
#scroll-list {
    height: 200px;
    overflow: hidden;
    overflow-y: auto;
}
</style>
