<script setup>
  import CloseIcon from '../assets/icons/close.svg'
</script>

<template>
  <div class="windowContainer" id="welcomePannel" ref="welcomePannel" :style="{top:coordY+'px', left:coordX+'px'}" @mousedown.left="$emit('focus')">
    <Moveable
        className="moveable"
        :target="$refs.welcomePannel"
        :draggable="true"
        @drag="onDrag"
    />
    <div class="windowTitle">
      <div class="titleContent">
        <p>./Welcome:{{guestName}}</p>
        <button type="button" class="titleBtn" @mousedown.stop @touchstart="$emit('close')" @click="$emit('close')">
          <CloseIcon name="close" class="icon"/>
        </button>
      </div>
    </div>
    <p id="welcomeTxt">
      hello !
      <br>
      bienvenue dans ma petite bulle sur l'Internet
      <br>
      (ce site est mis en page de manière générative,
      <br>
      à chaque fois que tu actualises ça change ^^)
      <br><br>
      je bricole beaucoup de choses, mais ici c'est plutôt
      <br>
      les vêtements, bijoux et accessoires <b>PIQUANT!</b>
      <br>
      n'hésite pas à rechercher ou filtrer
      <br>
      pour trouver ce que tu veux
      <br><br>
      dans le menu + tu pourras trouver
      <br>
      un formulaire de contact et de liens externes
      <br>
      vers d'autres projets persos
      <br>
      et ceux des copines
    </p>
  </div>
</template>

<style scoped>
  /*=====================WelcomePannel CSS*/
  #welcomePannel{
    background-color: var(--dark-color);
    position:absolute;
    cursor: grab;
  }

  #welcomeTxt{
    position:relative;
    padding: 10px;
    font-family: 'velvelyne';
    font-size:16px;
    color: var(--light-color);
    font-weight: lighter;
  }

  #welcomePannel:active{
    cursor: move;
  }

  /*=====================format pc*/
  @media(min-width:800px){
    #welcomePannel{
      width:333px;
      height:400px;
    }
  }

  /*=====================format tel*/
  @media(max-width:800px){

  }
</style>

<script>
  import Moveable from 'vue3-moveable';

  export default {
    name : 'WelcomePannel',
    components:{
      Moveable
    },
    emits: ["focus","close"],
    methods:{
      onDrag({ target, transform }) {
        target.style.transform = transform;
      },
      observeContainer(){
        const container = document.getElementById("contentContainer");

        if(!container){
          console.error("container not found");
          return
        }

        const observer = new ResizeObserver(entries=>{
          const rect = entries[0].contentRect;

          this.bodyWidth = rect.width;
          this.bodyHeight = rect.height;

          this.coordX = Math.random()*(this.bodyWidth-333);
          this.coordY = Math.random()*(this.bodyHeight-333);
        });

        observer.observe(container);
      }
  },
  data(){
    return {
      bodyHeight:0,
      bodyWidth:0,
      coordX:0,
      coordY:0,
      guestName:'unknown_Guest003'
    }
  },
  mounted(){
    this.$nextTick(() => {
        this.observeContainer()
    });
    console.log('coord:', this.coordX, this.coordY);
    console.log("Contact pannel is loaded!");
  }
};
</script>
