<template>
  <div class="w-full max-w-md mx-auto h-screen overflow-hidden flex flex-col bg-white">

    <!-- Верхняя панель -->
    <div v-if="store.screen != 1 && store.screen != 6" class="flex justify-between items-center p-1 border-b border-gray-200">
      <!-- Кнопка Назад -->
      <button
          @click="goBack"
          class="rounded-full p-2 hover:bg-gray-100 transition disabled:opacity-40 disabled:cursor-not-allowed"
          :disabled="store.screen === 1"
      >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
        </svg>
      </button>

      <!-- Кнопка Домой -->
      <button
          @click="goHome"
          class="rounded-full p-2 hover:bg-gray-100 transition"
      >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0h6" />
        </svg>
      </button>
    </div>

    <!-- Контейнер экранов -->
    <div class="flex-1 relative overflow-hidden">
      <Transition
          enter-from-class="transform translate-y-full"
          enter-active-class="transition-transform duration-500 ease-out"
          enter-to-class="transform translate-y-0"
          leave-from-class="transform translate-y-0"
          leave-active-class="transition-transform duration-500 ease-out"
          leave-to-class="transform -translate-y-full"
      >
        <component
            :is="currentScreen"
            :key="store.screen"
            class="absolute top-0 left-0 w-full h-full"
        />
      </Transition>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { useMainStore } from "./store/main";
import ScreenWelcome from "./components/ScreenWelcome.vue";
import ScreenAddress from "./components/ScreenAddress.vue";
import ScreenInterests from "./components/ScreenInterests.vue";
import ScreenDuration from "./components/ScreenDuration.vue";
import ScreenChat from "./components/ScreenChat.vue";
import ScreenRoute from "./components/ScreenRoute.vue";

const store = useMainStore();

const currentScreen = computed(() => {
  return [
    ScreenWelcome,
    ScreenAddress,
    ScreenInterests,
    ScreenDuration,
    ScreenChat,
    ScreenRoute,
  ][store.screen - 1];
});

// Навигация
function goBack() {
  if (store.screen > 1) {
    store.screen--;
  }
}

function goHome() {
  store.screen = 1;
}
</script>
