<script setup>
  import CloseIcon from '../assets/icons/close.svg'
  import FolderIcon from '../assets/icons/folder.svg'
  import FileIcon from '../assets/icons/file.svg'
</script>

<template>
  <div class="windowContainer" id="linkPannel" ref="linkPannel" :style="{top:coordY+'px', left:coordX+'px'}" @mousedown.left="$emit('focus')">
    <Moveable
        className="moveable"
        :target="$refs.linkPannel"
        :draggable="true"
        @drag="onDrag"
    />
    <!--TITRE-->
    <div class="windowTitle">
      <div class="titleContent">
        <p>./ExternalLinks.333</p>
        <button type="button" class="titleBtn" @mousedown.stop @touchstart="$emit('close')" @click="$emit('close')">
          <CloseIcon name="close" class="icon"/>
        </button>
      </div>
    </div>
    <!--CONTENU-->
    <div class="theMatrix" @mousedown.stop @touchstart.stop>
      <div class="itemStyle" v-for="item in displayedItems" :key="item.caption">
        <component :is="item.type==='folder'? FolderIcon : FileIcon" class="icon"/>
        <p class="itemCaption">{{item.caption}}</p>
      </div>

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

<style scoped>
  /*=====================LinkPannel CSS*/
  .theMatrix{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-rows: 180px;
    gap: 10px;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    align-items: center;
  }

  .itemStyle{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 13.12px;
    border-radius: 8px;
    width:90%;
    height: auto;
    color: var(--light-color);
    border-style: solid;
    border-width: thin;
    border-color: transparent;
  }

  .itemStyle .icon{
    height:auto;
    width:50%;
    fill: currentColor;
  }

  .itemStyle:hover{
    color: var(--accent-color);
    border-color: var(--accent-color);
    cursor: pointer;
  }

  .itemCaption{
    text-align: center;
    color: var(--light-color);
    font-family: 'velvelyne';
    font-weight: lighter;
    font-size: 16.1px;
    pointer-events: all;
    cursor:inherit;
  }

  .itemCaption:hover{
    color: var(--accent-color);
  }

  #linkPannel{
    background-color: var(--dark-color);
    cursor:grab;
  }

  /*=====================format pc*/
  @media(min-width:800px){
    #linkPannel{
      width:666px;
      height:666px;
    }
    .theMatrix{
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      grid-auto-rows: 180px;
    }
  }

  /*=====================format tel*/
  @media(max-width:800px){
    #linkPannel{
      position:fixed;
      width:333px;
      height:666px;
    }
    .theMatrix{
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      grid-auto-rows: 180px;
    }
  }
</style>

<script>
  import Moveable from 'vue3-moveable'
  const linksData = [
    {
      type: "folder",
      caption: "Folder001"
    },
    {
      type: "folder",
      caption: "Folder002"
    },
    {
      type: "folder",
      caption: "Folder333"
    },
    {
      type: "folder",
      caption: "test"
    },
    {
      type: "file",
      caption: "READ-ME.txt"
    }
  ]

  export default {
    name : 'LinkPannel',
    components:{
      Moveable,
      FileIcon,
      FolderIcon
    },
    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);
      },
      dataFirstLoad(){
        this.displayedItems = linksData;
        console.log(this.displayedItems);
      }
  },
  data(){
    return {
      bodyHeight:0,
      bodyWidth:0,
      coordX:0,
      coordY:0,
      displayedItems:[]
    }
  },
  mounted(){
    this.$nextTick(() => {
        this.observeContainer()
    });
    console.log('coord:', this.coordX, this.coordY);
    this.dataFirstLoad();
    console.log("Contact pannel is loaded!");
  }
};
</script>
