<template>
    <navbar />
    <div class="central-view">
        <sidebar>
            <filter-panel @filter="applyFilters" />
        </sidebar>
        <div class="main-view">
            <va-input v-model="searchQuery"></va-input>
            <overview-screen :items="filteredAndSearchedItems" @mapClick="applyFilters" />
        </div>
    </div>
</template>


<script>
import Navbar from "@/components/Navbar.vue";
import Sidebar from "@/components/Sidebar.vue";
import OverviewScreen from "@/components/OverviewScreen.vue";
import FilterPanel from "@/components/FilterPanel.vue";
export default {
    name: "front-view",
    components: { Navbar, Sidebar, OverviewScreen, FilterPanel },
    data() {
        return {
            items: [],
            currentFilters: {},
            searchQuery: '',
            searchColumns: [
                "basin",
                "deposit",
                "well",
                "stratum",
                "org",
                "samplelist",
                "description",
                "form_dimentions",
                "datalist",
                "resolution",
            ],
        }
    },
    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))
        },

        applyFilters(filter) {
            for (let key in filter) {
                if (filter[key] != "Any") {
                    if (key in this.currentFilters)
                        this.currentFilters[key].push(filter[key]);
                    else
                        this.currentFilters[key] = [filter[key]];
                } else {
                    delete this.currentFilters[key]
                }
            };
        },
    },
    mounted () {
        this.fetchAllItems()
    },
    computed: {
        filteredItems() {
            return [...this.items].filter(item => {
                for (let [filterParam, filterValues]  of Object.entries(this.currentFilters)) {
                    if (!filterValues.includes(item[filterParam])){
                        return false;
                    }
                }
                return true;
            })
        },
        filteredAndSearchedItems(){
            return this.filteredItems.filter(item => {
                if (this.searchQuery.trim() == ''){
                    return true
                }
                let result = false;
                // for each word in search query
                word_loop:
                for (let word of this.searchQuery.toLowerCase().trim().split(" ")) {
                    // check if the word is present in any of the columns
                    for (let searchColumn of this.searchColumns) {
                        if (item[searchColumn]?.toLowerCase().includes(word.trim())) {
                            // found the word, no need to check other columns
                            result = true;
                            continue word_loop;
                        }
                    }
                    // haven't found the word in any of the columns, drop this item
                    return false;
                }
                return result;
            })
        },
    },
}

</script>


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

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