<template>

  <body style="background-color:#f4f4f4">
    <DefaultLayout></DefaultLayout>

    <v-row style="background-color: #6b0065; height: 100px; margin-top: -50px; margin-bottom: -25px;">
    </v-row>

    <v-row justify="center">
      <v-col cols="12">
        <v-img class="profile-banner" max-height="375" :src="bannerImageUrl" cover
          style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
      </v-col>
    </v-row>
    <v-row style="background-color: #6b0065; height: 100px; margin-top: 0;" align="center">
      <v-col cols="12" class="text-right">
        <v-btn style="margin-right: 3%;"> <v-icon>mdi-pencil</v-icon></v-btn>
      </v-col>
    </v-row>

    <v-container style="max-width: 800px; margin-top: -100px" class="d-flex justify-center align-center">
      <v-container>
        <v-row justify="center">
          <v-col style="background-color: white; border-radius: 30px;" class="col-shadow" cols="12">
            <v-row justify="center" style="margin-bottom: 20px;">
              <v-col cols="auto" class="d-flex justify-center">
                <v-img class="your-profile-picture" :src="profilePictureUrl"></v-img>
              </v-col>
              <v-col cols="auto" class="d-flex justify-center align-center">
                <v-btn style="margin-top: -30px;">
                  <v-icon>mdi-pencil</v-icon>
                </v-btn>
              </v-col>
            </v-row>
            <p class="text-center" style="margin-bottom: 10px; font-size: 2.5rem; font-weight: 600;">
              {{ userName }}
            </p>
            <p class="text-center" style="margin-bottom: 50px; font-size: 1.2rem">
              {{ firstName }} {{ lastName }}
            </p>

            <v-form>
              <v-text-field variant="solo" v-model="firstName" label="Prénom" :readonly="!isEditing"></v-text-field>
              <v-text-field variant="solo" v-model="lastName" label="Nom" :readonly="!isEditing"></v-text-field>
              <v-text-field variant="solo" v-model="titre" label="Titre" :readonly="!isEditing"></v-text-field>
              <v-text-field variant="solo" v-model="description" label="Description"
                :readonly="!isEditing"></v-text-field>
            </v-form>
            <v-col class="text-right">
              <router-link :to="{ name: 'creatorfolio' }" class="">
                <v-btn style="margin-right: 20px;">Retour</v-btn>
              </router-link>
              <v-btn @click="toggleEdit">{{ isEditing ? 'Sauvegarder' : 'Éditer' }}</v-btn>
            </v-col>
          </v-col>
        </v-row>
      </v-container>
    </v-container>

    <FooterLayout></FooterLayout>
  </body>
</template>

<script async setup>
import DefaultLayout from '@/layouts/DefaultLayout.vue';
import FooterLayout from '@/layouts/FooterLayout.vue';
import MyUserModel from "@/models/myUserModel.js";
import { useClient } from "@/plugins/api.js";
import { onBeforeMount, ref } from 'vue';

const client = useClient();

const profilePictureUrl = ref('/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.png');
const bannerImageUrl = ref('/images/usersmedia/guillaumeMousseau/banners/bannerGuillaumeMousseau01.png');

const firstName = ref('');
const lastName = ref('');
const userName = ref('');
const titre = ref('');
const description = ref('');

const isEditing = ref(false);

const fetchUserData = async () => {
  try {
    const myUser = await client.get("/api/GetMyUser");
    const currentUserModel = MyUserModel.createFromApiResult(myUser.data);
    firstName.value = currentUserModel.firstName;
    lastName.value = currentUserModel.lastName;
    userName.value = currentUserModel.userName;
    // Assignez d'autres champs si nécessaire
  } catch (error) {
    console.error('Error fetching user data:', error);
  }
};

const toggleEdit = () => {
  isEditing.value = !isEditing.value;
};

onBeforeMount(fetchUserData);
</script>

<style>
.your-profile-picture {
  width: 300px;
  border-radius: 40px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.6);
}

.row-shadow {
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.6);
}

.col-shadow {
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}
</style>
