<template>
  <div class="flex flex-col h-full bg-white">
    <div class="p-5">
      <h2 class="text-xl font-semibold">Как ты представляешь свой маршрут?</h2>
      <p class="text-sm text-gray-500 mt-1">
        Опиши в свободной форме.
      </p>
    </div>

    <div class="flex-1 p-5 overflow-y-auto">
            <textarea
                v-model="store.interests"
                @input="resizeTextarea"
                ref="textareaRef"
                class="w-full border rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-cyan-500"
                rows="3"
                placeholder="Я хочу культурно провести время, а потом выпить кофе"
            ></textarea>
    </div>

    <div class="p-4">
      <button
          class="w-full bg-cyan-500 text-white py-3 rounded-2xl font-semibold cursor-pointer"
          :class="{
                    'hover:bg-cyan-600': isButtonEnabled,
                    'opacity-50 cursor-not-allowed': !isButtonEnabled,
                }"
          @click="store.screen = 4"
          :disabled="!isButtonEnabled"
      >
        Далее
      </button>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, nextTick } from "vue";
import { useMainStore } from "../store/main";
const store = useMainStore();

const textareaRef = ref(null);

const isButtonEnabled = computed(() => {
  return store.interests.trim().length > 0;
});

function resizeTextarea() {
  if (textareaRef.value) {
    textareaRef.value.style.height = "auto";
    textareaRef.value.style.height = textareaRef.value.scrollHeight + "px";
  }
}

nextTick(() => {
  resizeTextarea();
});
</script>
