<script setup>
  import CloseIcon from '../assets/icons/close.svg'
  import FolderIcon from '../assets/icons/folder.svg'
  import FileIcon from '../assets/icons/file.svg'
  import ReloadIcon from '../assets/icons/reload.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" id="rootBtn" v-show="isNotRoot" @mousedown.stop @touchstart="dataFirstLoad" @click="dataFirstLoad">
          <ReloadIcon name="close" class="icon"/>
        </button>
        <button type="button" class="titleBtn" @mousedown.stop @touchstart="$emit('close')" @click="closeClicked">
          <CloseIcon name="close" class="icon"/>
        </button>
      </div>
    </div>
    <!--CONTENU-->
    <p id="emptyFolderText" class="itemCaption" v-show="emptyFolder">Oops! There is nothing to display here...</p>
    <div class="theMatrix" @mousedown.stop @touchstart.stop @reload="dataFirstLoad">
      <div class="itemStyle" v-for="item in displayedItems" :key="item.caption" @click="openClickedFile(item)">
        <component :is="item.type==='folder'? FolderIcon : FileIcon" class="icon"/>
        <p class="itemCaption">{{item.caption}}</p>
      </div>
    </div>
  </div>
</template>

<style scoped>
  /*=====================LinkPannel CSS*/
  #rootBtn{
    margin-left: 60%;
  }

  #emptyFolderText{
    pointer-events: none;
  }

  .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;
    margin-left: 10px;
  }

  .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;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  /*=====================format pc*/
  @media(min-width:800px){
    #linkPannel{
      width:666px;
      height:666px;
      margin-left: -333px;
    }
    #rootBtn{
      margin-left: 390px;
    }
    .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;
    }
    #rootBtn{
      margin-left: 59px;
    }
    .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",
      children: [{
        type: "folder",
        caption: "test-open",
        children: []
      },
      {
        type: "file",
        caption: "READ-ME002.txt",
        src: ""
      }]
    },
    {
      type: "folder",
      caption: "Folder002",
      children: []
    },
    {
      type: "folder",
      caption: "Folder333",
      children: []
    },
    {
      type: "folder",
      caption: "test",
      children: []
    },
    {
      type: "file",
      caption: "READ-ME.txt",
      src: ""
    }
  ]

  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);
        this.isNotRoot = false;
        this.checkEmptyFolder();
      },
      openClickedFile(e){
        if(e.type === 'folder'){
          this.displayedItems = [...e.children];
          this.checkEmptyFolder();
          this.isNotRoot = true;
        } else {

        }
      },
      checkEmptyFolder(){
        if (this.displayedItems.length === 0){
          this.emptyFolder = true;
        }else{
          this.emptyFolder = false;
        }
      },
      closeClicked(){
        this.dataFirstLoad();
        this.$emit('close');
      }
  },
  data(){
    return {
      bodyHeight:0,
      bodyWidth:0,
      coordX:0,
      coordY:0,
      displayedItems:[],
      emptyFolder: false,
      isNotRoot : false
    }
  },
  mounted(){
    this.$nextTick(() => {
        this.observeContainer()
    });
    console.log('coord:', this.coordX, this.coordY);
    this.dataFirstLoad();
    console.log("Contact pannel is loaded!");
  }
};
</script>
