﻿<template>
  <div ref="container">
    <div class="text-center text-2xl py-4 border-t-4">Liens des réseaux sociaux et de votre site</div>
    <div class="px-5 py-2 flex flex-col space-y-4">
      <div class="flex justify-between items-center mb-2">
        <label class="text-lg">Instagram</label>
      </div>
      <v-text-field v-model="props.user.socialNetworks.instagramUrl" label="Instagram"
                    variant="outlined"></v-text-field>

      <div class="flex justify-between items-center mb-2">
        <label class="text-lg">TikTok</label>
      </div>
      <v-text-field v-model="props.user.socialNetworks.tikTokUrl" label="TikTok" variant="outlined"></v-text-field>

      <div class="flex justify-between items-center mb-2">
        <label class="text-lg">Facebook</label>
      </div>
      <v-text-field v-model="props.user.socialNetworks.facebookUrl" label="Facebook" variant="outlined"></v-text-field>

      <div class="flex justify-between items-center mb-2">
        <label class="text-lg">X</label>
      </div>
      <v-text-field v-model="props.user.socialNetworks.xUrl" label="X" variant="outlined"></v-text-field>

      <div class="flex justify-between items-center mb-2">
        <label class="text-lg">LinkedIn</label>
      </div>
      <v-text-field v-model="props.user.socialNetworks.linkedInUrl" label="LinkedIn" variant="outlined"></v-text-field>

      <div class="flex justify-between items-center mb-2">
        <label class="text-lg">Site Web</label>
      </div>
      <v-text-field v-model="props.user.socialNetworks.yourWebsiteUrl" label="Site Web"
                    variant="outlined"></v-text-field>

      <div class="flex flex-col space-y-4">
        <div class="flex items-center mb-2">
          <label class="text-lg mr-4">Icône pour votre site web *svg</label>
          <v-file-input
              v-model="iconFile"
              accept=".png, .jpeg, .jpg"
              hint="png, jpeg or jpg"
              label="Téléverser une icône"
              @change="onFileChange">
          </v-file-input>
        </div>
        <div v-if="iconUrl" class="flex justify-center">
          <img :src="iconUrl" alt="Icon" class="icon-preview">
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue';
import MyUserModel from "@/models/myUserModel.js";

const props = defineProps({
  user: {type: MyUserModel},
});

const emit = defineEmits(["updateWebsiteIcon"]);

const iconUrl = ref(props.user.storedDataUrls.websiteIconUrl);
const iconFile = ref(null);

const onFileChange = (event) => {
  const file = event.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = (e) => {
      iconUrl.value = e.target.result;
    };
    reader.readAsDataURL(file);
    emit("updateWebsiteIcon", file)
  }
};
</script>

<style scoped>
.icon-preview {
  max-width: 250px;
  max-height: 250px;
}
</style>
