<script setup>
    import CloseIcon from '../assets/icons/close.svg'
</script>

<template>
    <div id="followPannel" class="windowStyle" ref="followPannel" @mousedown="$emit('focus')" @touchstart="$emit('focus')">
      <Moveable
          className="moveable"
          :target="target"
          :draggable="true"
          @drag="onDrag"
      />
      <div class="windowTitle">
        <p>
          Nous Suivre Hors des Réseaux !
        </p>
        <!-- touchstart.capture pour passer en prio sur déplacement fenêtre/ .stop si pas de method-->
        <button type="button" class="closeBtn" @mousedown.capture="closeClicked" @touchstart.capture="closeClicked" data-tooltip="fermer">
          <CloseIcon name="close" class="icon"/>
        </button>
      </div>
      <div class="windowContent" id="followContent">
        <div class="tutoStepStyle" id="createAccount" :class="{closedStep: hasAccount}">
          <div class="tutoStepTitle" @mousedown.stop @click="backToAccount" @touchstart.stop="backToAccount">
            <p>1 &rarr; Créer un compte</p>
          </div>
          <div class="tutoStepContent">
            <div class="substepStyle" :class="{closedStep: hasAccount || isCreatingAccount}">
              <p>As-tu déjà un compte sur une instance mastodon ?</p>
              <div class="tutoAnswers">
                <button type="button" name="yesAcc" class="textBtnStyle" @mousedown.stop @click="userHasAccount" @touchstart.stop="userHasAccount">Oui!</button>
                <button type="button" name="noAcc" class="textBtnStyle" @mousedown.stop @click="userNoAccount" @touchstart.stop="userNoAccount">Non, pas encore!</button>
              </div>
            </div>
            <div class="substepStyle" :class="{closedStep: !noAccount}">
              <p>Pour commencer, il faut te créer un compte sur une instance, n'importe laquelle ! Si tu n'as pas d'idées, tu peux utiliser celle-ci :</p>
              <a href="https://piaille.fr/" class="textBtnStyle">piaille.fr</a>
              <p>Et si tu veux choisir exactement l'instance qui te convient, tu peux faire un tour ici :</p>
              <a href="https://joinmastodon.org/fr/servers" class="textBtnStyle">joinmastodon.org/fr/servers</a>
              <button type="button" name="nextStep" class="textBtnStyle" id="nextStep" @mousedown.stop @click="userHasAccount" @touchstart.stop="userHasAccount">J'ai crée mon compte!</button>
            </div>
          </div>
        </div>
        <div class="tutoStepStyle" id="followAccount" :class="{closedStep: !hasAccount}">
          <div class="tutoStepTitle" @mousedown.stop @click="userHasAccount" @touchstart.stop="userHasAccount">
            <p>2 &rarr; Nous Suivre</p>
          </div>
          <div class="tutoStepContent">
            <div class="substepStyle">
              <p>Maintenant que tu as un compte<br>(ou si tu en avais déjà un), il te suffit<br>de nous chercher :</p>
              <button type="button" name="copyLink" class="textBtnStyle" ref="textCopy" @mousedown.stop @click="textCopy" @touchstart.stop="textCopy" :class="{alert: alertActive}" data-tooltip="copier le texte">{{textContent}}</button>
              <p>et de cliquer sur "Suivre" pour rester<br>inform&#xF1920; des dernières nouvelles<br>de Drags and Nerds !</p>
            </div>
          </div>
        </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){}
  */

  #followPannel{
    position: fixed;
    width: 333px;
    height: 444px;
    top: 400px;
    left: 50px;
  }

  #followContent{
    position: relative;
    width: 100%;
    height: 200%;
    overflow-y: scroll;
    margin-bottom: 7.77px;
  }

  .tutoStepStyle{
    position: relative;
    width: 95%;
    height: auto;
    border-radius: 16.1px;
    border-style: solid;
    border-color: var(--main-color);
    border-width: thin;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    margin-top: 3.33px;
    transition: 3.33s ease;
  }
  .tutoStepStyle.closedStep{
    height: 33px;
  }

  .tutoStepTitle{
    width: 100%;
    height: 33px;
    font-family: 'lineal';
    font-size: 16.1px;
    color: var(--main-color);
    padding-left: 16.1px;
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
    background-color: var(--accent-color);
    box-sizing: border-box;
  }

  .tutoStepContent{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }

  .tutoStepContent p{
    font-family: 'velvelyne';
    font-size: 16.1px;
    font-weight: bold;
    color: var(--main-color);
    padding-left: 16.1px;
    padding-right: 16.1px;
    width: 90%;
  }
  .tutoStepContent .textBtnStyle{
    width: 90%;
    height: 33px;
    font-size: 13.12px;
    margin-left: 0;
    margin-top: -3.33px;
  }

  #nextStep{
    margin-top: 13.12px;
    width: 50%;
    background-color: var(--accent-color);
  }

  .substepStyle{
    width: 100%;
    height: auto;
    padding-bottom: 16.1px;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    visibility: visible;
  }
  .substepStyle.closedStep{
    height:0;
    overflow-y: hidden;
    visibility: hidden;
    position: absolute;
  }

  .tutoAnswers{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: 100%;
  }
  .tutoAnswers .textBtnStyle{
    height: 33px;
    width: 43%;
  }

  .textBtnStyle.alert{
    background-color: var(--accent-color);
    color: var(--main-color);
  }

  /*================ PC LARGE*/
  @media(min-width:1300px){
    #followPannel{
      left:444px;
    }
  }
</style>

<script>
  import Moveable from 'vue3-moveable';

  export default {
    name : 'FollowPannel',
    setup() {
      const message = this.textContent;


      return { message, onCopy, onError }
    },
    components:{
      Moveable
    },
    data(){
      return{
        target: null,
        hasAccount: false,
        isCreatingAccount: false,
        noAccount : false,
        textContent: "@drags-nerds@pouet.drags-nerds.net",
        hideTimer: null,
        alertActive: false
      }
    },
    emits: ['close','focus'],
    methods:{
      onDrag({ target, transform }) {
        target.style.transform = transform;
      },
      closeClicked(){
        this.$emit('close');
        this.backToAccount();
      },
      userHasAccount(){
        this.hasAccount = true;
        //console.log(this.noAccount, this.hasAccount);
      },
      userNoAccount(){
        this.noAccount = true;
        this.isCreatingAccount = true;
        //console.log(this.noAccount, this.hasAccount);
      },
      backToAccount(){
        this.noAccount = false;
        this.hasAccount = false;
        this.isCreatingAccount = false;
        //console.log(this.noAccount, this.hasAccount);
      },
      textCopy(){
        if(!this.alertActive){
          const text = this.textContent;

          const textarea = document.createElement("textarea");
          textarea.value = text;

          document.body.appendChild(textarea);
          textarea.select();

          document.execCommand("copy");

          document.body.removeChild(textarea);

          this.alertMsg();
        }
      },
      async alertMsg(){
        this.alertActive = true;
        this.textContent = "Le texte a été copié !";
        clearTimeout(this.hideTimer)

        this.hideTimer = setTimeout(() => {
          this.alertActive = false;
          this.textContent = "@drags-nerds@pouet.drags-nerds.net";
        }, 1610)
      }
    },
    mounted(){
      this.target = this.$refs.followPannel;
      //console.log(this.noAccount, this.hasAccount);
      console.log("Follow off-socials pannel is loaded!");
    }
  };
</script>
