﻿<template>
  <div class="py-8" ref="container">
    <div class="text-center text-2xl mb-4">Liens des réseaux sociaux et de votre site</div>
    <div class="px-5 py-4 flex flex-col space-y-4">
      <div v-for="network in socialNetworks" :key="network.field">
        <div class="flex justify-between items-center mb-2">
          <label class="text-lg">{{ network.label }}</label>
        </div>
        <v-text-field v-model="network.value" :label="network.label" variant="outlined"></v-text-field>
      </div>
      <div class="flex flex-col space-y-4">
        <div class="flex items-center mb-2">
          <label class="text-lg mr-4">Icon</label>
          <v-file-input v-model="iconFile" 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 class="flex justify-end space-x-2 px-4">
      <v-btn class="save-btn" @click="saveAll">Enregistrer</v-btn>
      <router-link :to="`/${currentUserName}`">
        <v-btn class="save-btn">Retour</v-btn>
      </router-link>
    </div>
  </div>
</template>

<script async setup>
import { ref } from 'vue';

const socialNetworks = ref([
  { label: 'Instagram', field: 'instagram', value: '' },
  { label: 'TikTok', field: 'tiktok', value: '' },
  { label: 'Facebook', field: 'facebook', value: '' },
  { label: 'X', field: 'X', value: '' },
  { label: 'LinkedIn', field: 'linkedin', value: '' },
  { label: 'Site Web', field: 'website', value: '' }
]);

const iconUrl = ref('');

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);
  }
};

const saveAll = () => {
  const formData = socialNetworks.value.reduce((acc, network) => {
    acc[network.field] = network.value;
    return acc;
  }, {});

  console.log('Form data:', formData);
  console.log('Icon URL:', iconUrl.value);
  // Logic to save all fields and the icon
};
</script>

<style scoped>
.save-btn {
  z-index: 10;
}
.icon-preview {
  max-width: 250px;
  max-height: 250px;
}
</style>
