<script setup>
  import MapComponent from "../components/MapComponent.vue";
  import { ref } from 'vue'
  import { getUserInfo } from '../api';
  import { useRouter } from 'vue-router';
  import BottomNav from '@/components/BottomNav.vue'

  const router = useRouter();
  const showModal = ref(false);
    const selectedCar = ref(null);
    const user = ref({
      firstName: "",
      lastName: "",
      phone: ""
    });


    getUserInfo().then(res => {
        user.value = res.data;
    })

    const showCar = (car) => {
        console.log(car)
        selectedCar.value = car;
        showModal.value = true;
    };

    const closeModal = () => {
        showModal.value = false;
    };

    const goToProfile = () => {
      router.push({ name: 'profile' });
    };
</script>

<template>
  <div class="main-screen">
    <MapComponent style="height: 100%; width: 100%;"  @car-clicked="showCar"/>
    
    <div v-if="showModal" class="modal" @click.self="closeModal">
      <div class="modal-content">
        <div class="car-info-grid">
          <div class="info-card">
            <i class="material-icons">directions_car</i>
            <div class="info-text">{{ selectedCar?.model }}</div>
          </div>
          <div class="info-card">
            <i class="material-icons">route</i>
            <div class="info-text">{{ selectedCar?.km_left }} km</div>
          </div>
          <div class="info-card">
            <i class="material-icons">timer</i>
            <div class="info-text">5 min - free</div>
          </div>
        </div>

        <div class="price-section">
          <div class="price-title">Price: </div>
          <div class="price-options">
            <button class="active-button" button>
              <div>Минута</div>
              <div>{{ selectedCar?.tarif }} $</div>
            </button>
            <button class="active-button" >
              <div>Час</div>
              <div>{{ selectedCar?.tarif * 60 - (selectedCar?.tarif * 60 * 0.1) }} $</div>
            </button>
            <button class="active-button" button>
              <div>День</div>
              <div>{{ selectedCar?.tarif * 1440 - (selectedCar?.tarif * 1440 * 0.2) }} $</div>
            </button>
          </div>
          <button class="active-button">ЗАБРОНИРОВАТЬ</button>
        </div>
      </div>
    </div>   
  </div>
<BottomNav/>
</template>

<style scoped>
.modal {
  display: flex;
  justify-content: center;
  align-items: end;
  position: fixed;
    top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  background-color: white;
  color: #888;
  padding: 20px;
    width: 100%;
  height: 45%;
  border-radius: 20px 20px 0 0;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}


.main-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.car-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.info-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  border-radius: 8px;
  background-color: #f0f6f8;
}

.info-text {
  margin-top: 5px;
  font-size: 14px;
}

.price-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.price-title {
  font-size: 16px;
  margin-bottom: 10px;
}

.price-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

button{ /*это стиль для кнопки если ее не трогать*/
  padding: 10px 20px;
  background-color: #bae0ff;
  color: rgb(56, 51, 26);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(156, 39, 176, 0.3);
}
button:hover { /*это стиль для кнопки если на нее навести курсор*/
  background-color: #657f94;
  box-shadow: rgb(124, 70, 138);
}

button:active { /*это стиль для кнопки если ее нажать*/
  background-color: #bae0ff;
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(156, 39, 176, 0.4);
}

.active-button {
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: 8px;
  background-color: #bae0ff;
  font-weight: bold;
  cursor: pointer;
}
</style>
