<script setup>
  const modal = ref({
    make: false,
    location: false,
    price: false,
  });

  const city = ref("");
  const route = useRoute();

  const updateModal = (key) => {
    modal.value[key] = !modal.value[key];
  };

  const onChangeLocation = () => {
    if (!city.value) {
      return;
    }

    if (!isNaN(parseInt(city.value))) {
      throw createError({
        statusCode:400,
        message:"invalid city"
      });
    }
    updateModal('location');
    navigateTo(`/city/${city.value}/car/${route.params.make}`);
    city.value = "";
  };
</script>

<template>

<div class="shadow border w-64 mr-10 z-30 h-[190px]">
            <div class="p-5 flex justify-between relative cursor-pointer border-b">
              <h3>Location</h3>
              <h3 @click="updateModal('location')" class="text-blue-400 capitalize">
                {{ route.params.city }}
              </h3>
              <div v-if="modal.location" 
                class="absolute border shadow left-56 p-5 top-1 -m-1 bg-white">
                <input type="text" name="" id="" class="border p-1 rounded" v-model="city"/>
                <button class="bg-blue-400 w-full mt-2 rounded text-white p-1" @click="onChangeLocation">Apply</button>
              </div>
            </div>
            <div class="p-5 flex justify-between relative cursor-pointer border-b">
              <h3>Make</h3>
              <h3 @click="updateModal('make')" class="text-blue-400 capitalize">Toyota</h3>
              <div v-if="modal.make" class="absolute border shadow left-56 p-5 top-1 -m-1 bg-white">
                <input type="text" name="" id="" class="border p-1 rounded"/>
                <button class="bg-blue-400 w-full mt-2 rounded text-white p-1">Apply</button>
              </div>
            </div>
            <div class="p-5 flex justify-between relative cursor-pointer border-b">
              <h3>Price</h3>
              <h3 @click="updateModal('price')" class="text-blue-400 capitalize">Toyota</h3>
              <div v-if="modal.price" class="absolute border shadow left-56 p-5 top-1 -m-1 bg-white">
                <input type="text" name="" id="" class="border p-1 rounded"/>
                <button class="bg-blue-400 w-full mt-2 rounded text-white p-1">Apply</button>
              </div>
            </div>
          </div>

</template>