<script setup>
    import { onMounted, ref, watch } from 'vue';
    import Spiner from '../components/ui/Spiner.vue';
    import useDirectory from '../composables/useDirectory';
    import CardCompany from '../components/cardcompany.vue';
    import TruckTypes from '../components/ui/TruckTypes.vue';
    import Segments from '../components/ui/Segments.vue';
    import States from '../components/ui/States.vue';
    import Cities from '../components/ui/Cities.vue';

    const {loading, companies, getCompaniesData} = useDirectory();
    const query = ref('');
    const selectedTruckType = ref([]);
    const selectedCategory = ref([]);
    const selectedState = ref([]);
    const selectedCities = ref([]);
    const filterQuery = ref([]);

    onMounted(() => {
        filterQuery.value.company_type = 'shipper';
        getCompaniesData(filterQuery.value);
    });

    watch(query, () => {
        if(query.value.length === 0){
            filterQuery.value.search = "";
            getCompaniesData(filterQuery.value);
        }
    });

    watch(selectedState, () => {
        if(selectedState.value != null){
            filterQuery.value.state = "company_state[$in][]="+ selectedState.value.state_name;
            getCompaniesData(filterQuery.value);
        } 
    });

    watch(selectedCities, () => {
        if(selectedCities.value != null){
            filterQuery.value.city = "company_city[$in][]="+ selectedCities.value.city_name;
            getCompaniesData(filterQuery.value);
        } 
    });

    watch(selectedCategory, () => {
        if(selectedCategory.value != null){
            filterQuery.value.category = "categories[$in][]=" + selectedCategory.value._id;
            getCompaniesData(filterQuery.value);
        } 
    });

    watch(selectedTruckType, () => {
        if(selectedTruckType.value != null){
            filterQuery.value.truck_type = "truck_type[$in][]="+ selectedTruckType.value.meta_value;
            getCompaniesData(filterQuery.value);
        } 
    });

    const search = () => {
        if(query.value.length >= 2){
            // filterQuery.value = "company_name[$regex]=" + query.value + "&company_name[$options]=i";
            filterQuery.value.search = "company_name[$regex]=" + query.value + "&company_name[$options]=i";
            getCompaniesData(filterQuery.value);
        } 
    
    }

    const clearFilter = () => {
    
        selectedCities.value = null;
        selectedCategory.value = null;
        selectedState.value = null;
        selectedTruckType.value = null;

        filterQuery.value.truck_type = "";
        filterQuery.value.category = "";
        filterQuery.value.city = "";
        filterQuery.value.state = "";

        filterQuery.value.company_type = 'shipper';

        if(query.value == ''){
            getCompaniesData(filterQuery.value);
        } else {
            query.value = '';
        }
    }

    const clearState = () => {
        filterQuery.value.state = "";
        getCompaniesData(filterQuery.value);
    }

    const clearCity = () => {
        filterQuery.value.city = "";
        getCompaniesData(filterQuery.value);
    }

    const clearTruckType = () => {
        filterQuery.value.truck_type = "";
        getCompaniesData(filterQuery.value);
    }

    const clearCategory = () => {
        filterQuery.value.category = "";
        getCompaniesData(filterQuery.value);
    }
</script>

<template>
    <div>
        <h2 class="title mb-5">Directorios de <span class="title-main">Embarcadores</span></h2>
        <div class="card-filters">
            <div class="d-flex mb-2">
                <input class="form-control me-2" type="search" name="" placeholder="Buscar embarcador" id="" @:input="search()" v-model="query" aria-label="Search">
                <button class="btn btn-outline-dark me-2" type="button" @click="search">Buscar</button>
                <button 
                    class="btn btn-danger" type="button" @click="clearFilter">
                    <i class="fa-solid fa-arrow-rotate-right"></i>
                </button>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-6 px-2 py-2">
                    <TruckTypes v-model="selectedTruckType" @clear-option="clearTruckType"/>
                </div>
                <div class=" col-xs-12 col-sm-6 px-2 py-2">
                    <Segments v-model="selectedCategory" @clear-option="clearCategory"/>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-6 px-2 py-2">
                    <States v-model="selectedState" @clear-option="clearState"/>
                </div>
                <div class="col-xs-12 col-sm-6 px-2 py-2">
                    <Cities v-model="selectedCities" @clear-option="clearCity"/>
                </div>
            </div>
        </div>
        <Spiner v-if="loading"/>
        <div 
            class="card-info flex-column align-items-center"
            v-if="loading === false && companies.length <= 0"
        >
            <img src="/images/logo.png" alt="logo" width="100">
            <h2 class="title">No hay registros</h2>
        </div>
        
        <CardCompany
            v-else
            :key="company._id"
            v-for="company in companies"
            :company="company"
        />
    </div>
</template>

<style scoped>
    .card-filters {
        display: flex;
        margin: 0 auto;
        background-color: #FFF;
        border-radius: 13px;
        /* background-color: red; */
        flex-direction: column;
        /* align-items: center; */
        justify-content: center;
        width: 100%;
        padding: 20px 10%;
        margin-bottom: 24px;
    }

    @media (max-width: 768px) {
        .card-filters {
            padding: 20px 16px;
        }
    }
</style>