<script setup>
  import PeopleIcon from '../assets/icons/people.svg'
  import InstaIcon from '../assets/icons/insta.svg'
  import ContactIcon from '../assets/icons/contact.svg'
</script>

<template>
    <div id="infoMenuContainer" class="uiStyle">
      <div id="welcomeTextContainer">
        <p id="welcomeText">
          À tou&#xF47D0;s les queers, tou&#xF47D0;s les nerds,
          <br>
          et  tou&#xF47D0;s les personnes entres les deux,
          <br>
          <br>
          Vous êtes convi&#xF1920;s à la 2ème édition
          <br>
          de <strong>Drags and Nerds !</strong>
          <br>
          Au programme, drags shows & performances nerds,
          <br>
          musique électronique, vjing, live-coding, synthés vidéos, etc.
          <br>
          <br>
          Nous voulons également<br>centrer notre soirée
          autour de l'inclusivité.<br>Pour ce faire,
          le port du<br><strong>masque FFP2 sera<br>obligatoire à l'intérieur</strong>,
          <br>
          afin de protéger les plus vulnérables d'entres nous.
          <br>
          Les masques seront distribués gratuitement à l'entrée !
          <br>
          <br>
          Également,<br>
          afin de créer du lien entre nos commus,
          plusieurs assos seront présentes, afin de partager et d'échanger nos valeurs et nos savoir-faires
          <br>
          <br>
          Enfin,<br>
          (pour les courageu&#xF57B0;s qui ont lu jusque là ^^),
          notre collectif est très ouvert à s'agrandir et à se compléter, alors n'hésite pas à nous contacter,
          si tu as envie de participer !
          </p>
        <button type="button" class="textBtnStyle" @click="openPannel('follow')">NOUS SUIVRE HORS DES RÉSEAUX!</button>
        <button type="button" class="textBtnStyle" @click="openPannel('donation')" v-show="false">NOUS FAIRE UNE DONATION</button>
        <button type="button" class="textBtnStyle" id="ticketButton" @click="openPannel('ticket')" v-show="false">RÉSERVER MA PLACE!</button>
      </div>
      <div id="btnColumn">
        <button type="button" class="iconBtnStyle" id="btnArtist" @click="openPannel('artist')" data-tooltip="à propos de nous">
          <PeopleIcon name="people" class="icon"/>
        </button>
        <!--<button type="button" class="iconBtnStyle" id="btnNews" @click="openPannel('news')" data-tooltip="newsletter">
          <CloseIcon name="test" class="icon"/>
        </button>-->
        <button type="button" class="iconBtnStyle" id="btnInsta" @click="openPannel('insta')" data-tooltip="instagram">
          <InstaIcon name="insta" class="icon"/>
        </button>
        <button type="button" class="iconBtnStyle" id="btnContact" @click="openPannel('contact')" data-tooltip="nous contacter">
          <ContactIcon name="contact" class="icon"/>
        </button>
      </div>
    </div>
    <!--'msg' 'insta' 'news' 'contact' 'artist' 'follow' 'visual' 'link'-->
    <InboxDiv @open="openPannel('msg')"></InboxDiv>
    <ArtistPan
      v-show="isActive.includes('artist')"
      @openImg = "openPannel('visual')"
      @openLink = "openPannel('link')"
      @close="closePannel('artist')"
      @focus="focusPannel('artist')"
      :class="{zBase: isFocused!=='artist', zFocus: isFocused==='artist'}">
    </ArtistPan>
    <NewsPan
      v-show="isActive.includes('news')"
      @close="closePannel('news')"
      @focus="focusPannel('news')"
      :class="{zBase: isFocused!=='news', zFocus: isFocused==='news'}">
    </NewsPan>
    <ContactPan
      v-show="isActive.includes('contact')"
      @close="closePannel('contact')"
      @focus="focusPannel('contact')"
      :class="{zBase: isFocused!=='contact', zFocus: isFocused==='contact'}">
    </ContactPan>
    <InstaPan
      v-show="isActive.includes('insta')"
      @close="closePannel('insta')"
      @focus="focusPannel('insta')"
      :class="{zBase: isFocused!=='insta', zFocus: isFocused==='insta'}">
    </InstaPan>
    <MessagePan
      v-show="isActive.includes('msg')"
      @close="closePannel('msg')"
      @focus="focusPannel('msg')"
      :class="{zBase: isFocused!=='msg', zFocus: isFocused==='msg'}">
    </MessagePan>
    <FollowPan
      v-show="isActive.includes('follow')"
      @close="closePannel('follow')"
      @focus="focusPannel('follow')"
      :class="{zBase: isFocused!=='follow', zFocus: isFocused==='follow'}">
    </FollowPan>
    <VisualizerPan
      v-show="isActive.includes('visual')"
      @close="closePannel('visual')"
      @focus="focusPannel('visual')"
      :class="{zBase: isFocused!=='visual', zFocus: isFocused==='visual'}">
    </VisualizerPan>
    <LinkPan
      v-show="isActive.includes('link')"
      @close="closePannel('link')"
      @focus="focusPannel('link')"
      :class="{zBase: isFocused!=='link', zFocus: isFocused==='link'}">
    </LinkPan>
    <DonationPan
      v-show="isActive.includes('donation')"
      @close="closePannel('donation')"
      @focus="focusPannel('donation')"
      :class="{zBase: isFocused!=='donation', zFocus: isFocused==='donation'}">
    </DonationPan>
    <TicketPan
      v-show="isActive.includes('ticket')"
      @close="closePannel('ticket')"
      @focus="focusPannel('ticket')"
      :class="{zBase: isFocused!=='ticket', zFocus: isFocused==='ticket'}">
    </TicketPan>
</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:500px){}
      ================ PC LARGE
      @media(min-width:1000px){}
  */

  #infoMenuContainer{
    width:100%;
    position:relative;
    height:55%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
  }

  #btnColumn{
    width:15%;
    height:100%;
    background-color: transparent;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;

  }

  #btnColumn .iconBtnStyle{
    width:100%;
    height:20%;
    margin-left: -13.12%;
    margin-top: 19%;
  }

  #btnColumn .icon{
    width: 50px;
  }

  #welcomeTextContainer{
    width:77%;
    height:90%;
    background-color: transparent;
    position: relative;
    padding: 16.1px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }

  #welcomeText{
    pointer-events: all;
    height: 100%;
    font-size: 16.1px;
    font-family: 'velvelyne';
    color: var(--main-color);
    font-weight: bold;
    padding-right: 16.1px;
    margin-top: -7.77px;
    overflow-y: scroll;
    line-height: 1.1em
  }

  #welcomeText strong{
    font-family: 'lineal';
    font-weight: normal;
    font-size: 22.2px;
    animation: blink 7.77s infinite;
  }

  #welcomeTextContainer .textBtnStyle{
    height:44.4px;
    width: 70%;
    margin-bottom: 7.77px;
  }

  #ticketButton.textBtnStyle{
    position: absolute;
    top: -80px;
    left: 64%;
    /*animation: float 1.61s infinite;*/
    color: var(--main-color);
    background-color: var(--accent-color);
    width: 50%;
  }
  /*
  #ticketButton.textBtnStyle:hover{
    background-color: var(--main-color);
    animation: none;
    border-color: var(--accent-color);
    color: var(--accent-color);
  }
  */

  /*================ MID FORMAT*/
  @media(min-width:500px){
    #welcomeText{
      height:72%;
    }

    #btnColumn .iconBtnStyle{
      height:20%;
      margin-left: 0;
      margin-top: 7.77%;
    }

  }

  /*================ PC LARGE*/
  @media(min-width:1300px){
    #welcomeText{
      height:80%;
    }

    #btnColumn .iconBtnStyle{
      height:20%;
      margin-left: -13.12%;
      margin-top: 13.12%;
    }
    #welcomeText strong{
      font-size: 22.2px;
    }

    #ticketButton.textBtnStyle{
      top: unset;
      bottom: -85%;
      left: -300px;
    }

  }
</style>

<script>
  export default {
    name : 'InfoMenu',
    emits: ['closeInfo'],
    data(){
      return{
        isActive: [],
        isFocused: ""
      }
    },
    methods:{
      delay(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
      },
      async openPannel(name){
        console.log(name);
        if(!this.isActive.includes(name)){
          this.isActive.push(name);
        }
        this.isFocused = name;
        this.delay(33);
        this.$emit('closeInfo');
      },
      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("Info menu is loaded!");
    }
  };
</script>
