<script setup lang="ts">
import { useUserStore } from "@/stores/user";

import { ref } from "vue";

import ProfileView from "@/components/personalProfile/ProfileView.vue";
import ProfileEdit from "@/components/personalProfile/ProfileEdit.vue";

const user = useUserStore();
const editMode = ref(false);
const saved = ref(false);

let saveBannerTimeout: ReturnType<typeof setTimeout> | null = null;

function saveComplete() {
  editMode.value = false;
  saved.value = true;
  if (saveBannerTimeout) {
    clearTimeout(saveBannerTimeout);
  }
  saveBannerTimeout = setTimeout(() => {
    saved.value = false;
  }, 10 * 1000);
}

function startEditMode() {
  editMode.value = true;
  saved.value = false;
}
</script>

<template>
  <div class="flex flex-grow flex-col bg-gray-200 md:flex-row">
    <div class="bg-white p-8">
      <section class="flex max-w-lg flex-col items-center space-y-2">
        <img
          :alt="user.first_name"
          class="h-auto w-32 rounded-full md:w-48"
          :src="user.avatar_url"
        />
        <h3>{{ user.first_name }} {{ user.last_name }}</h3>
        <span>{{ user.email }}</span>
      </section>
    </div>

    <div class="flex flex-grow flex-col space-y-4 px-8 py-8 md:px-16">
      <div v-if="!editMode" class="flex justify-end space-x-4">
        <button
          class="btn btn-secondary"
          data-cy="editProfileButton"
          @click="startEditMode"
        >
          {{ $t("a.Profil bearbeiten") }}
        </button>
      </div>
      <div v-if="saved" class="flex items-center space-x-3 bg-green-200 px-6 py-3">
        <it-icon-check class="h-10 w-10 text-green-800" />
        <span>{{ $t("a.Deine Änderungen wurden gespeichert") }}.</span>
      </div>
      <ProfileEdit v-if="editMode" @cancel="editMode = false" @save="saveComplete" />
      <ProfileView v-else />
    </div>
  </div>
</template>
