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

<template>
  <div class="windowContainer" id="aboutPannel" ref="aboutPannel" :style="{top:coordY+'px', left:coordX+'px'}" @mousedown.left="$emit('focus')" >
    <Moveable
        className="moveable"
        :target="$refs.aboutPannel"
        :draggable="true"
        @drag="onDrag"
    />
    <div class="windowTitle">
      <div class="titleContent">
        <p>./About.333</p>
        <button type="button" class="titleBtn" @mousedown.stop @touchstart="$emit('close')" @click="$emit('close')">
          <CloseIcon name="close" class="icon"/>
        </button>
      </div>
    </div>
    <p id="about_text">
      si vous êtes là c'est que vous voulez en savoir plus,
      <br>
      alors voici quelques infos sur mes pratiques :
      <br><br>
      je pense qu'il ya déjà assez de vêtements sur cette Terre (merci la fast-fashion...) et qu'en recyclant ceux déjà existant on pourrat s'habiller
      <br>
      PENDANT DES SIÈCLES!
      <br><br>
      je travaille une esthétique punk, brutaliste
      <br>
      et maximaliste, et utilise une matière première
      <br>
      de seconde main, voire recyclée, trouvée dans la rue,
      <br>
      les poubelles, etc.
      <br><br>
      je produit des accessoires à partir de rien (vraiment !)
      <br>
      et je custom des vêtements, découper, recoudre, rajouter, enlever, teinter, décolorer, démonter pour ré-assembler, tout est permis ^^
      <br><br>
      je travaille UNIQUEMENT sur commande ! x333
      <br><br>
      tout est vendu à un prix libre, convenu à l'avance,
      <br>
      en fonction des moyens de chacun.x.s
      <br><br>
      le troc d'objet, de service ou de conaissances
      <br>
      est également bienvenu, et peut remplacer
      <br>
      COMPLÈTEMENT un paiement monnayé
      <br><br>
      l'upcycling est un mythe vendu par des prétentieu.x.s
    </p>
  </div>
</template>

<style scoped>
  /*=====================AboutPannel CSS*/
  #aboutPannel{
    background-color: var(--dark-color);
    position:absolute;
    cursor:grab;
  }
  #aboutPannel .windowTitle{
    height: 42px;
  }

  #about_text{
    position:relative;
    padding: 10px;
    font-family: 'velvelyne';
    font-size:16px;
    color: var(--light-color);
    font-weight: lighter;
    overflow-y: scroll;
    scroll-behavior: smooth;
    pointer-events: all;
    cursor: ns-resize;
  }

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

  /*=====================format tel*/
  @media(max-width:800px){
    #aboutPannel{
      position:fixed;
      width: 333px;
      height: 80%;
    }

  }
</style>

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

  export default {
    name : 'AboutPannel',
    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,
    }
  },
  mounted(){
    this.$nextTick(() => {
        this.observeContainer()
    });
    console.log('coord:', this.coordX, this.coordY);
    console.log("Contact pannel is loaded!");
  }
};
</script>
