<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'
  import AboutIcon from '../assets/icons/about.svg'
  import BackIcon from '../assets/icons/back.svg'
  import { loadPeopleData } from '@/data/peopleData.js'
</script>

<template>
    <div id="artistPannel" class="windowStyle" ref="artistPannel" @mousedown="$emit('focus')" @touchstart="$emit('focus')">
      <Moveable
          className="moveable"
          :target="target"
          :draggable="true"
          @drag="onDrag"
      />
      <div class="windowTitle">
        <p>
          <b class="windowTitleLower">À PROPOS DE NOUS</b>
          <br>
          {{fileName}}
        </p>
        <!-- touchstart.capture pour passer en prio sur déplacement fenêtre/ .stop si pas de method-->
        <div class="dblBtnContainer">
          <button type="button" class="iconBtnStyle" id="rootBtn" v-show="isNotRoot" @mousedown.stop @touchstart="backToRoot" @click="backToRoot" data-tooltip="retour">
            <BackIcon name="backwoods" class="icon"/>
          </button>
          <button type="button" class="iconBtnStyle" @mousedown.stop @touchstart="$emit('close')" @click="closeClicked" data-tooltip="fermer">
            <CloseIcon name="close" class="icon"/>
          </button>
        </div>
      </div>
      <div class="windowContent" id="artistContent">
        <p id="emptyFolderText" v-show="emptyFolder">Oops! There is nothing to display here...</p>
        <div v-show="displayedItems" class="theMatrix" @mousedown.stop @touchstart.stop @reload="dataFirstLoad">
          <div class="itemStyle" v-for="item in displayedItems" :class="{selectedItemStyle:item.isSelected, displayStyle: !item.isSelected}" :key="item.caption" @click="itemIsClicked(item)">
            <component :is="item.type==='folder'? FolderIcon : item.type === 'text'? FileIcon : item.type === 'link'? AboutIcon : CloseIcon" class="icon"/>
            <p class="itemCaption">{{item.caption}}</p>
          </div>
        </div>
        <div v-show="displayedItems" class="itemDesc" @touchstart.stop>
          <p>{{displayedDescription}}</p>
        </div>
      </div>
    </div>
</template>

<style scoped>
  /*================= Mise en page:
    => Mobile First : par défaut, moins de 500px
    => Tablette et PC format haut : de 500 à 1000px
    => PC large : à partir de 1000px
  */

  /*+++++++++++++++++ COPYBOX
      ================ PC HAUT/IPAD
      @media(min-width:650px){}
      ================ PC LARGE
      @media(min-width:1300px){}
  */

  #artistPannel{
    position: fixed;
    width: 333px;
    height: 500px;
    top: 16.1px;
    left: 16.1px;
  }

  #artistContent{
    width:100%;
    height:87%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .dblBtnContainer{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    height: 100%;
    width: 100px;
    align-items: center;
  }

  .dblBtnContainer .iconBtnStyle{
    height: 33px;
    width: 50px;
    margin-left: 7.77px;
    background-color: var(--main-color);
    color: var(--back-color);
    border-color: var(--back-color);
  }

  .dblBtnContainer .iconBtnStyle:hover{
    background-color: var(--back-color);
    color: var(--main-color);
  }

  #emptyFolderText{
    align-self:center;
    margin-top: 33px;
    pointer-events: none;
    color: var(--accent-color);
    font-family: 'lineal';
    font-weight: lighter;
    font-size: 16.1px;
  }

  .theMatrix{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    grid-auto-rows: 133px;
    gap: 10px;
    width: 97%;
    height: 66%;
    overflow-y: auto;
    align-items: center;
    margin-left: 5px;
    margin-top: 5px;
  }

  .itemDesc{
    width: 90%;
    height: 23%;
    border-radius: 16.1px;
    border-color: var(--main-color);
    border-style: solid;
    border-width: thin;
    margin-top: 2%;

    color: var(--main-color);
    font-family: 'velvelyne';
    font-weight: bold;
    font-size: 16.1px;
    pointer-events: all;
    cursor:inherit;

    align-self: center;
    padding-left: 2%;
    padding-right: 3.33%;
    overflow-y: scroll;

    white-space: pre-line;
  }

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

  .itemStyle:hover{
    border-color: var(--main-color);
  }
    /*===============Not selected Item*/
    .displayStyle{
      color: var(--main-color);
      border-style: solid;
      border-width: thin;
      border-color: transparent;
    }

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

    /*===============Seleted Item*/
    .selectedItemStyle{
      color: var(--accent-color);
      border-style: solid;
      border-width: thin;
      border-color: transparent;
    }
    .selectedItemStyle .icon{
      height:auto;
      width:50%;
      fill: currentColor;
    }

    .itemCaption{
      text-align: center;
      font-weight: bold;
      font-size: 16.1px;
      pointer-events: all;
      cursor:inherit;
    }
    .itemCaption:hover{
      color: var(--accent-color);
    }
    .displayStyle .itemCaption{
      color: var(--main-color);
      font-family: 'velvelyne';
    }
    .selectedItemStyle .itemCaption{
      color: var(--accent-color);
      font-family: 'lineal';
      font-weight: normal;
    }

  /*================ PC LARGE*/
  @media(min-width:1300px){
    #artistPannel{
      height: 777px;
      width: 666px;
    }
    .theMatrix{
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      grid-auto-rows: 180px;
    }
  }
</style>

<script>
  import Moveable from 'vue3-moveable';
  import { dataStorage } from '../dataExchange.js'

  export default {
    name : 'ArtistPannel',
    components:{
      Moveable
    },
    data(){
      return{
        target: null,
        linksData: [],
        lastClickedItem: null,
        dblClickTimer: null,
        displayedItems: null,
        rootFolderContent: [],
        emptyFolder: false,
        displayedDescription: "",
        fileName: "",
        isNotRoot : false
      }
    },
    emits: ['close','focus','openImg','openLink'],
    methods:{
      onDrag({ target, transform }) {
        target.style.transform = transform;
      },
      dataFirstLoad(){
        this.displayedItems = [...this.linksData];
        console.log(this.displayedItems);
        this.isNotRoot = false;
        this.checkEmptyFolder();
        this.displayedItems.forEach(it => {
          it.isSelected = false;
        });
        this.displayedDescription = "1x click pour plus d'infos \n 2x click pour accéder au contenu";
        this.fileName = "./";
      },
      openFile(e){
        this.$emit('focus');
        if(e.type === 'folder'){
          this.rootFolderContent.push({content:[...this.displayedItems], directory:this.fileName, description: this.displayedDescription});
          this.displayedItems = [...e.children];
          this.checkEmptyFolder();
          this.isNotRoot = true;
          this.displayedDescription = e.description
          this.fileName += e.caption + '/';
        }
        if(e.type === 'image'){
            this.$emit('openImg');
            dataStorage.selectedImg = {
              src: e.src,
              caption: e.caption
            }
            this.displayedDescription = e.description;
        }
        if (e.type === 'link'){
          this.$emit('openLink');
          dataStorage.selectedLink = {
            linksData: e.links,
            caption: e.caption,
            description: e.description
          }
          console.log(dataStorage.selectedLink);
        }
        if (e.type === 'text'){
          this.selectFile(e);
        }

      },
      selectFile(e){
        this.$emit('focus');
        this.displayedItems.forEach(it => {
          it.isSelected = false;
        })
        e.isSelected = true;
        this.displayedDescription = e.description;
      },
      itemIsClicked(e){
        if (!this.dblClickTimer || this.lastClickedItem !== e){
          clearTimeout(this.dblClickTimer);
          this.lastClickedItem = e;
          this.dblClickTimer = setTimeout(() => {
            this.selectFile(e);
            this.dblClickTimer = null;
            this.lastClickedItem = null;
          }, 200);
        }else{
          clearTimeout(this.dblClickTimer);
          this.dblClickTimer = null;
          this.lastClickedItem = null;
          this.openFile(e);
        }
      },
      checkEmptyFolder(){
        if (this.displayedItems.length === 0){
          this.emptyFolder = true;
          this.displayedItems = null;
        }else{
          this.emptyFolder = false;
        }
      },
      backToRoot(){
        let rootDepth = this.rootFolderContent.length-1;
        this.displayedItems = this.rootFolderContent[rootDepth].content;
        this.fileName = this.rootFolderContent[rootDepth].directory;
        this.displayedDescription = this.rootFolderContent[rootDepth].description;
        this.rootFolderContent.splice(rootDepth,1);
        rootDepth = this.rootFolderContent.length
        if (rootDepth === 0){
          this.isNotRoot = false;
        }
        this.checkEmptyFolder();
      },
      closeClicked(){
        this.dataFirstLoad();
        this.$emit('close');
      }
    },
    async mounted(){
      this.linksData = await loadPeopleData();
      this.target = this.$refs.artistPannel;
      this.dataFirstLoad();
      console.log("Artist pannel is loaded!");
    }
  };
</script>
