<template>
    <div>
        <navbar />
        <div class="central-view">
            <sidebar @filter="applyFilters" />
            <div class="main-view">
                <overview-screen :items="items" />
            </div>
        </div>
    </div>
</template>


<script>
import Navbar from "@/components/Navbar.vue";
import Sidebar from "@/components/Sidebar.vue";
import OverviewScreen from "@/components/OverviewScreen.vue";
export default {
    name: "front-view",
    components: { Navbar, Sidebar, OverviewScreen },
    data() {
        return {
            items: [],
            currentFilters: {},
        }
    },
    methods: {
        fetchAllItems() {
            const baseURL = "http://localhost:8080/api/v1";

            fetch(`${baseURL}/items/?limit=10000`)
                .then(res => res.json())
                .then(data => this.items = data)
                .catch((e) => console.log(e))
        },
        fetchFiltered(filter) {
            const baseURL = "http://localhost:8080/api/v1";

            // request options
            const options = {
                method: 'POST',
                body: JSON.stringify(filter),
                headers: {
                    'Content-Type': 'application/json'
                }
            };

            fetch(`${baseURL}/detailed_search/?limit=10000`, options)
                .then(res => res.json())
                .then(data => this.items = data)
                .catch((e) => console.log(e))
        },
        applyFilters(filter) {
            let key;
            for (key in filter) {
                if (filter[key] != "Any") {
                    this.currentFilters[key] = filter[key]
                } else {
                    delete this.currentFilters[key]
                }
            };

            this.fetchFiltered(this.currentFilters);
        }
    },
    created() {
        this.fetchAllItems()
    },
}

</script>


<style lang="css">
.central-view {
    height: max(100vh, 100%);
    margin: 0;
    display: flex;
    flex-direction: row;
}

.main-view {
    width: 100%;
}
</style>