<script setup>
  import WelcomeIcon from '../assets/icons/info.svg'
  import AboutIcon from '../assets/icons/about.svg'
  import ContactIcon from '../assets/icons/contact.svg'
  import LinksIcon from '../assets/icons/link.svg'
</script>
<template>
  <div id="extraContainer">
    <div id="btnPannel">
      <button type="button" class="btnColStyle" @click="openPannel('welcome')" id="info">
        <WelcomeIcon name="welcome" class="icon"/>
      </button>
      <button type="button" class="btnColStyle" @click="openPannel('about')">
        <AboutIcon name="about" class="icon"/>
      </button>
      <button type="button" class="btnColStyle" @click="openPannel('contact')">
        <ContactIcon name="contact" class="icon"/>
      </button>
      <button type="button" class="btnColStyle" @click="openPannel('link')">
        <LinksIcon name="links" class="icon"/>
      </button>
    </div>
    <div id="contentContainer" ref="contentContainer">
      <div class="windowContainer" id="contentPannel">
      </div>

      <contactDiv v-show="isActive.includes('contact')" @close="closePannel('contact')" @focus="focusPannel('contact')" :class="{zTop: isFocused==='contact' , zBase: isFocused!== 'contact'}" >
      </contactDiv>

      <aboutDiv v-show="isActive.includes('about')" @close="closePannel('about')" @focus="focusPannel('about')" :class="{zTop: isFocused==='about' , zBase: isFocused!== 'about'}" >
      </aboutDiv>

      <linkDiv v-show="isActive.includes('link')" @close="closePannel('link')" @focus="focusPannel('link')" :class="{zTop: isFocused==='link' , zBase: isFocused!== 'link'}" >
      </linkDiv>

      <welcomeDiv v-show="isActive.includes('welcome')" @close="closePannel('welcome')" @focus="focusPannel('welcome')" :class="{zTop: isFocused==='welcome' , zBase: isFocused!== 'welcome'}" >
      </welcomeDiv>
    </div>
  </div>
</template>

<style scoped>
  /*Template HTML pour section titre pre-styled

  <div class="windowTitle">
    <div class="titleContent">
      <p>./ExtraContent.333</p>
      <button type="button" class="titleBtn"> <p>×</p> </button>
    </div>
  </div>
  */

  /*=====================Extra Content CSS*/

  .btnColStyle{
    background-color: transparent;
    z-index: 1;
    font-family: 'lineal';
    color: var(--light-color);
    border-color: var(--light-color);
    border-style: solid;
    border-radius: 16.1px;
    border-width: thin;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  .btnColStyle:hover{
    background-color: var(--light-color);
    color: var(--dark-color);
  }

  #info{
    font-family: 'avara';
  }

  /*=====================format pc*/
  @media (min-width:800px){
    #extraContainer{
      position: fixed;
      height: 100%;
      width: 50%;
      right: 0;
      background-color: transparent;
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      z-index: -2;
    }

    #btnPannel{
      position: relative;
      height: 100%;
      width: 15%;
      left:0;
      padding-top: 2vh;
      background-color: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: 0;
    }

    #contentContainer{
      position: relative;
      height: 100%;
      width: 85%;
      left:0;
      background-color: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
    }

    #contentPannel{
      width: 90%;
      height: 90%;
      background-color: transparent;
      z-index: 1;
    }

    .btnColStyle{
      width:100%;
      height:20%;
      margin-top: 3.33vh;
      font-size: 77px;
    }
  }

  /*=====================format tel*/
  @media (max-width:800px){
    #extraContainer{
      position: fixed;
      height: 50%;
      width: 100%;
      bottom: 0;
      background-color: transparent;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      z-index: -2;
    }

    #btnPannel{
      position: relative;
      height: 15%;
      width: 100%;
      top: 0;
      padding-left: 3vw;
      background-color: transparent;
      display: flex;
      flex-direction: row;
      align-items: center;
      z-index: 0;
    }

    #contentContainer{
      position: relative;
      height: 85%;
      width: 100%;
      top: 0;
      background-color: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      z-index: 0;
    }

    #contentPannel{
      width: 90%;
      height: 90%;
      background-color: transparent;
      z-index: 1;
    }
    .btnColStyle{
      width:20%;
      height:100%;
      margin-left: 2.666vw;
      font-size: 33px;
    }
  }
</style>

<script>
  export default {
    name : 'ExtraContent',
    data(){
      return{
        isActive:[],
        isFocused:""
      }
    },
    methods:{
      openPannel(name){
        if(!this.isActive.includes(name)){
          this.isActive.push(name);
        }
        this.isFocused = name;
      },
      focusPannel(name){
        if(this.isActive.includes(name)){
          this.isFocused = name;
        }
      },
      closePannel(name){
        const index = this.isActive.indexOf(name)
        if(index !== -1){
          this.isActive.splice(index,1);
        }
        if(this.isFocused === name){
          this.isFocused = null;
        }

      }
    },
    mounted(){
      console.log("Extra content is loaded!");
    }
  };
</script>
