<script setup>
  import CloseIcon from '../assets/icons/close.svg'
  import FolderIcon from '../assets/icons/folder.svg'
  import TextIcon from '../assets/icons/text.svg'
  import ImgIcon from '../assets/icons/img.svg'
  import LinkIcon from '../assets/icons/link.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">Oopsi! Il n'y a rien  à afficher ici<br>(pour l'instant...)</p>
        <div v-show="gridDisplay" class="theMatrix" @mousedown.stop @reload="dataFirstLoad" @click="deselectAll" touchstart="deselectAll">
          <div class="itemStyle" v-for="item in displayedItems" :class="{selectedItemStyle:item.isSelected, displayStyle: !item.isSelected}" :key="item.id" @click.stop="openFile(item)" @touchstart="openFile(item)">
            <component :is="item.type==='folder'? FolderIcon : item.type === 'text'? TextIcon : item.type === 'link'? LinkIcon : ImgIcon" class="icon"/>
            <p class="itemCaption">{{item.caption}}</p>
          </div>
        </div>
        <div v-show="listDisplay" class="nevrEndingList" @mousedown.stop @reload="dataFirstLoad" @click="deselectAll" touchstart="deselectAll">
          <div class="listItemStyle" v-for="item in displayedItems" :class="{selectedItemStyle:item.isSelected, displayStyle: !item.isSelected}" :key="item.id" @click.stop="openFile(item)" @touchstart="openFile(item)">
            <component :is="item.type==='folder'? FolderIcon : item.type === 'text'? TextIcon : item.type === 'link'? LinkIcon : ImgIcon" class="icon"/>
            <p class="itemCaption" id="listTitle">{{item.caption}}</p>
            <p class="itemCaption" id="listAuthor">{{item.author}}</p>
            <p class="itemCaption" id="listDate"><time :timedate="item.dateInfo">{{item.date}}</time></p>
          </div>
        </div>
        <div v-show="displayedItems" class="itemDesc" @touchstart.stop @click.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: 380px;
    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;
    margin-left: 0;
    pointer-events: none;
    color: var(--accent-color);
    font-family: 'lineal';
    font-weight: lighter;
    font-size: 16.1px;
  }

  /*=================GRID DISPLAY*/
  .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: cell;
  }

  .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%;
    }

    .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: 666px;
      width: 666px;
    }
    .theMatrix{
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      grid-auto-rows: 180px;
    }
  }

  /*======================LIST DISPLAY*/
  .nevrEndingList{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 95%;
    height: 66%;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-right: 7.77px;
  }

  .listItemStyle{
    width:100%;
    height: 33px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin-top: 7.77px;
    margin-left: 1.61px;
    cursor: cell;
    border-style: solid;
    border-width: thin;
    border-color: transparent;
    border-radius: 16.1px;
    overflow: hidden;
  }

  .listItemStyle:hover{
    border-color: var(--main-color);
  }

  .listItemStyle .icon{
    height: 16.1px;
    width: 33px;
    margin-left: 3.33px;
    margin-right: 16.1px;
    margin-top: 0;
  }

  .listItemStyle .itemCaption{
    font-family: 'velvelyne';
    font-weight: bold;
    font-size: 13.12px;
    pointer-events: none;
    cursor:inherit;
    width: 20%;
    height: 100%;
    text-align: left;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-top: 1.61px;
    user-select: none;
  }

  #listTitle{
    width: 50%;
  }

  #listAuthor{
    width: 33%;
  }

  #listDate{
    width: 33px;
  }

</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,
        gridDisplay: true,
        listDisplay: false,
        displayedDescription: "",
        fileName: "",
        isNotRoot : false,
        rootDepth: 0
      }
    },
    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.deselectAll();
        this.fileName = "./";
        if(!this.emptyFolder){
          this.gridDisplay = true;
          this.listDisplay = false;
        };
      },
      deselectAll(){
        this.displayedItems.forEach(it => {
          it.isSelected = false;
        });
        if(!this.isNotRoot){
          this.displayedDescription = "Clique sur un dossier pour accéder au contenu !";
        }else{
          this.displayedDescription = this.rootFolderContent.at(-1).description;
        }
      },
      openFile(e){
        this.$emit('focus');
        if(e.type === 'folder'){
          this.rootFolderContent.push({content:[...this.displayedItems], directory:this.fileName, description: this.displayedDescription});
          this.rootDepth = this.rootFolderContent.length;
          this.displayedItems = [...e.children];
          this.checkEmptyFolder();
          this.isNotRoot = true;
          this.displayedDescription = e.description
          this.fileName += e.caption + '/';
          if (e.caption === 'Autres contenus'){
            this.gridDisplay = false;
            this.listDisplay = true;
            this.organizeItems();
          }
        }
        if(e.type === 'image'){
            this.$emit('openImg');
            dataStorage.selectedImg = {
              src: e.src,
              caption: e.caption,
              like: e.like,
              alt: e.alt,
              isLiked: e.isLiked
            }
            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);
        }

        this.selectFile(e);

      },
      selectFile(e){
        //console.log(e);
        if(!this.emptyFolder){
          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;
          }, 161);
        }else{
          clearTimeout(this.dblClickTimer);
          this.dblClickTimer = null;
          this.lastClickedItem = null;
          this.openFile(e);
        }
      },
      checkEmptyFolder(){
        if (this.displayedItems.length === 0){
          this.emptyFolder = true;
          this.gridDisplay = false;
          this.listDisplay = false;
          this.displayedItems = null;
        }else{
          this.emptyFolder = false;
        }
      },
      organizeItems(){
        this.displayedItems.sort((a,b) => b.dateInfo.localeCompare(a.dateInfo));
      },
      backToRoot(){
        this.displayedItems = this.rootFolderContent.at(-1).content;
        this.fileName = this.rootFolderContent.at(-1).directory;
        if(this.emptyFolder){
          this.emptyFolder = false;
          this.gridDisplay = true;
        }
        if(this.listDisplay){
          this.listDisplay = false;
          this.gridDisplay = true;
        }
        this.deselectAll();
        this.rootFolderContent.splice(this.rootFolderContent.length-1,1);
        this.rootDepth = this.rootFolderContent.length
        if (this.rootDepth === 0){
          this.isNotRoot = false;
        }
        //console.log(this.rootDepth);
      },
      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>
