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

<template>
  <div class="windowContainer" id="contactPannel" ref="contactPannel" :style="{top:coordY+'px', left:coordX+'px'}" @mousedown.left="$emit('focus')" >
    <Moveable
        className="moveable"
        :target="$refs.contactPannel"
        :draggable="true"
        @drag="onDrag"
    />
    <div class="windowTitle">
      <div class="titleContent">
        <p>./Contact.333</p>
        <button type="button" class="titleBtn" @mousedown.stop @touchstart="$emit('close')" @click="$emit('close')">
          <CloseIcon name="close" class="icon"/>
        </button>
      </div>
    </div>
    <div class="contactContainer">
      <a class="btnContact" id="insta" @mousedown.stop @touchstart.stop href="https://www.instagram.com/vga.nar6.ta/" target="_blank" >Instagram : <br> <b>@vga.nar6.ta</b></a>
      <a class="btnContact" id="signal" @mousedown.stop @touchstart.stop href="https://signal.me/#eu/76w7wcHZpW1HtunwdjbIJZWpTGVMCqobn_qAzhGBrSRd8cGtdq9NZJondaOHJ9iM" target="_blank" >Signal : <br> <b>@vega.333</b></a>

    </div>
  </div>
</template>

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

  .contactContainer{
    width:100%;
    display:flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
  }

  .btnContact{
    width: 100%;
    font-family: 'velvelyne';
    font-weight: lighter;
    background-color: var(--dark-color);
    color: var(--light-color);
    border-style: solid;
    border-width: thin;
    border-color: var(--light-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
  }

  .btnContact b {
    font-weight: bold;
  }
  #insta{
    border-radius:0 0 0 16.1px;
  }

  #signal{
    border-radius:0 0 16.1px 0;
  }

  #insta:hover{
    background-color: var(--accent-color);
    border-color: var(--light-color);
    color: var(--dark-color);
  }

  #signal:hover{
    background-color: var(--light-color);
    border-color: var(--accent-color);
    color: var(--dark-color);
  }

  /*=====================format pc*/
  @media(min-width:800px){
    #contactPannel{
      width:333px;
      height:144px;
    }
    .btnContact{
      height: 111px;
      padding-top: 21px;
    }

  }

  /*=====================format tel*/
  @media(max-width:800px){
    #contactPannel{
      width:222px;
      height:77px;
    }

    .btnContact{
      height: 80px;
      padding-top: 14px;
    }
  }
</style>

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

  export default {
    name : 'ContactPannel',
    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>
