<script setup>
    import { onMounted, ref, watch } from 'vue';
    import { useCompanyStore } from '../stores/company';
    import Spiner from '../components/ui/Spiner.vue';
    import { useVehiclesStore } from '../stores/vehicles';
    import CardVehicle from '../components/CardVehicle.vue';
    import CardEmpty from '../components/CardEmpty.vue';
    import CreateVehicleModal from '../components/CreateVehicleModal.vue';
    import StatusVehicleModal from '../components/StatusVehicleModal.vue';
    import DriverVehicleModal from '../components/DriverVehicleModal.vue';

    const companyStore = useCompanyStore();
    const vehicleStore = useVehiclesStore();

    const loading = ref(false);
    const filterQuery = ref([]);
    const query = ref('');
    const vehicleCurrent = ref(null);
    const openModal = ref(false);
    const editStatusVehicle = ref(false);
    const editDriverVehicle = ref(false);

    onMounted(() => {
        getInitData();
    })

    const getInitData = async() => {
        loading.value = true;
        filterQuery.value.company = "company="+ localStorage.getItem('id');
        await vehicleStore.fetchVehicles(filterQuery.value, false);
        await companyStore.getDrivers();
        loading.value = false;
    }

    const getVehiclesWithFilters = async(filter) => {
        loading.value = true;
        await vehicleStore.fetchVehicles(filter, true);
        loading.value = false;
    }

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

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

    const clearFilter = () => {
        filterQuery.value.search = "";
        filterQuery.value.company = "company="+ localStorage.getItem('id');

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

    const handleSetCurrentVehicle = (data) => {
        console.log(data);
        if(data.modal === 'form') {
            openModal.value = true;
        } else if (data.modal === 'driver') {
            editDriverVehicle.value = true;
        } else {
            editStatusVehicle.value = true;
        }
        vehicleCurrent.value = data.vehicle;
    }

    const handleResetCurrentVehicle = () => {
        openModal.value = false;
        editDriverVehicle.value = false;
        editStatusVehicle.value = false;
        vehicleCurrent.value = null;
    }

</script>

<template>
    <div>
        <CreateVehicleModal 
            v-if="openModal === true"
            :vehicle="vehicleCurrent"
            @reset-vehicle="handleResetCurrentVehicle"
        />
        <StatusVehicleModal
            v-if="editStatusVehicle === true"
            :vehicle="vehicleCurrent"
            @reset-vehicle="handleResetCurrentVehicle"
        />
        <DriverVehicleModal
            v-if="editDriverVehicle === true"
            :vehicle="vehicleCurrent"
            @reset-vehicle="handleResetCurrentVehicle"
        />
        <h2 class="title">Vehiculos</h2>
        <div class="box-filters">
            <div class="box-search">
                <input class="form-control custom-search" type="search" name="" placeholder="Buscar vehicles" id="" @:input="search()" v-model="query" aria-label="Search">
            </div>
            <button 
                class="btn btn-danger bg-dark" type="button" @click="clearFilter">
                <i class="fa-solid fa-arrow-rotate-right"></i>
                <span class="clear-sm"> Reset</span><span class="clear-md"> filtros</span>
            </button>
            <button
                class="btn-primary-sm radius-sm"
                data-toggle="modal" 
                data-target="#createVehicleModal"
                @click="handleSetCurrentVehicle({vehicle: null, modal: 'form'})"
            ><i class="fa-solid fa-plus"></i> <span class="clear-sm"> Agregar</span><span class="clear-md"> vehiculo</span></button>
        </div>
        <Spiner v-if="loading"/>
        <div v-else>
            <CardVehicle
                v-if="vehicleStore.vehicles.length > 0"
                v-for="vehicle in vehicleStore.vehicles"
                :vehicle="vehicle"
                :key="vehicle._id"
                @set-vehicle="handleSetCurrentVehicle"
            />
            <CardEmpty v-else text="No hay vehiculos agregados"/>
        </div>
    </div>
</template>

<style scoped>
    .box-filters {
        display: flex;
        flex-direction: row;
        justify-content: end;
        gap: 1rem;
        margin: 1.5rem 0px;
    }

    .box-search {
        width: 60%;
    }
    .custom-search {
        width: 100%;
        padding: 12px 20px;
    }

    @media (max-width: 1024px) {
        .box-search {
            width: 60%;
        }
        .box-filters {
            gap: .4rem;
        }
    }

    @media (max-width: 768px) {

        .box-search {
            width: 100%;
        }
        .box-filters {
            gap: .3rem;
        }
    }
</style>