﻿<template>
  <!--  Bannière-->
  <div class="relative bottom-4  z-20 m">
    <div class="relative flex flex-col">
      <!-- Social Network-->
      <div class="bg-opacity-50 flex flex-col md:flex-row items-center justify-between py-2 px-4 min-h-24" :style="{ backgroundColor: creator.profileColors.bannerTop || '#6B0065' }">
        <div class="text-white mb-2 md:mb-0 w-full md:w-auto flex justify-between md:block">
          <div class="text-lg">1000+ Abonnés</div>
          <div class="text-sm">500 Contacts en commun</div>
        </div>
        <div class="grid grid-cols-6  md:flex flex-wrap space-x-0 md:space-x-10 gap-6 ">
          <a 
              v-for="socialNetwork in GetActiveSocialNetworkUrls()" 
              :href="socialNetwork.url" target="_blank"
             class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-blue-500">
            <v-icon v-if="socialNetwork.icon.includes('mdi')">{{ socialNetwork.icon }}</v-icon>
            <img v-if="socialNetwork.icon.includes('tiktok')" src="/images/hutopymedia/icons/white/tiktokwhite.png" alt="TikTok" class="w-9 h-9">
          </a>
        </div>
      </div>


    </div>
    <!--Banner & user info-->
    <div class="relative">
      <!--Banner-->
      <div>
        <img class=" w-full drop-shadow-[0_15px_10px_rgba(0,0,0,0.7)]" :src="creator.storedDataUrls.bannerPictureUrl || '/images/hutopymedia/banners/tutorialbanner.png'" alt="Profile Banner" style="max-height: 550px">
      </div>
      <!--User info -->
      <div class="absolute top-1/2 right-10 text-white z-30 transform -translate-y-1/2">
        <div class="text-white">
          <div class="text-2xl sm:text-3xl md:text-2xl lg:text-4xl xl:text-6xl font-bold">
            <p :style="{ color: creator.profileColors.accent }">{{ creator.firstName }}</p>
          </div>
          <div class="text-2xl sm:text-3xl md:text-2xl lg:text-4xl xl:text-6xl font-bold">
            <p :style="{ color: creator.profileColors.accent }">{{ creator.lastName }}</p>
          </div>
          <div class="text-1xl sm:text-xl md:text-lg lg:text-2xl xl:text-3xl">
            <p :style="{ color: creator.profileColors.accent }">{{ creator.occupation }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Actions Button & image profile -->
  <div class="relative bottom-4 w-full">
    <div class="bg-gray-800 py-4 relative shadow-lg min-h-24" :style="{ backgroundColor: creator.profileColors.bannerBottom || '#A30E79' }">
      <div class="flex flex-col sm:flex-row items-center sm:justify-between">
        <img
            class="left-5 rounded-full border-solid border-2 sm:absolute sm:top-1/2 sm:transform sm:-translate-y-1/2 md:left-20 z-20"
            :src="creator.storedDataUrls.profilePictureUrl || '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png'"
            alt="Profile Picture"
            :style="{ borderColor: creator.profileColors.accent || '#A30E79', maxWidth: '250px', width: '100%' }"
        >
        <div v-if="creator.id === userStore.getCurrentUser().id" class="flex flex-wrap sm:flex-nowrap items-center mt-4 sm:mt-0 sm:ml-auto space-x-2 sm:space-x-4">
          <button
              class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125"
              @click="isDialogActive = true">
            <v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-text-box-plus-outline</v-icon>
          </button>
          <button class="text-white py-2 px-4 rounded"
                  style="background-color: #333; transition: background-color 0.3s ease;"
                  onmouseover="this.style.backgroundColor='#555';" onmouseout="this.style.backgroundColor='#333';">
            S'ABONNER
          </button>
          <button
              class="flex items-center text-white transform transition-transform duration-200 hover:text-white hover:scale-125">
            <v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-comment-text</v-icon>
          </button>
          <button
              class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125">
            <v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-information</v-icon>
          </button>
        </div>
      </div>
    </div>
  </div>

  <!--Post-modale-->
  <v-dialog v-model="isDialogActive" max-width="500">
    <template v-slot:default="{ isActive }">
      <v-card class="text-center rounded-xl">
        <div class="text-white p-4 rounded-t" :style="{backgroundColor: creator.profileColors.menu || '#A30E79'}">
          <h2>Publication</h2>
        </div>
        <v-card-text class="bg">
          <v-row class="justify-center mb-4">
            <v-col class="d-flex align-center justify-end">
              <v-btn :class="{'v-btn--active': !isArticle}" @click="togglePostType(false)">QUICKY</v-btn>
            </v-col>
            <v-col class="d-flex align-center justify-start">
              <v-btn :class="{'v-btn--active': isArticle}" @click="togglePostType(true)">ARTICLE</v-btn>
            </v-col>
          </v-row>
          <v-textarea label="Écrivez votre message ici..." v-model="message" outlined></v-textarea>
          <v-file-input
              label="Ajoutez des fichiers"
              v-model="files"
              outlined
              multiple
              dropzone
              placeholder="Glissez et déposez des fichiers ici ou cliquez pour sélectionner des fichiers"
          ></v-file-input>
        </v-card-text>
        <v-card-actions class="justify-end">
          <v-btn color="primary" @click="publishPost">Publier</v-btn>
          <v-btn color="primary" @click="cancelPost">Annuler</v-btn>
        </v-card-actions>
      </v-card>
    </template>
  </v-dialog>


</template>

<script setup>

import {defineProps, ref} from "vue";
import {useUserStore} from "@/stores/user.js";

const props = defineProps({
  creator: { type: Object, required: true },
});

const userStore = useUserStore();

const isDialogActive = ref(false);
const message = ref('');
const files = ref([]);
const isArticle = ref(false);

const publishPost = () => {
  // Logic to publish post
  console.log('Post published:', message.value, files.value);
  isDialogActive.value = false;
  resetPostForm();
};

const cancelPost = () => {
  isDialogActive.value = false;
  resetPostForm();
};

const resetPostForm = () => {
  message.value = '';
  files.value = [];
};

const togglePostType = (article) => {
  isArticle.value = article;
};

function GetActiveSocialNetworkUrls(){
  const socialNetworks = [];
  const userSocialNetworks = props.creator.socialNetworks;
  if (userSocialNetworks.facebookUrl !== ''){
    socialNetworks.push({icon: "mdi-facebook", url: props.creator.socialNetworks.facebookUrl})
  }
  if (userSocialNetworks.facebookUrl !== ''){
    socialNetworks.push({icon: "mdi-twitter", url: props.creator.socialNetworks.xUrl})
  }
  if (userSocialNetworks.instagramUrl !== ''){
    socialNetworks.push({icon: "mdi-instagram", url: props.creator.socialNetworks.instagramUrl})
  }
  if (userSocialNetworks.tiktokUrl !== ''){
    socialNetworks.push({icon: "/images/hutopymedia/icons/white/tiktokwhite.png", url: props.creator.socialNetworks.tikTokUrl})
  }
  if (userSocialNetworks.youtubeUrl !== ''){
    socialNetworks.push({icon: "mdi-youtube", url: props.creator.socialNetworks.youtubeUrl})
  }
  if (userSocialNetworks.yourWebsiteUrl !== ''){
    socialNetworks.push({icon: "mdi-web", url: props.creator.socialNetworks.yourWebsiteUrl})
  }
  
  return socialNetworks;
}
    
</script>