<template>
  <div id="lolStatusContainer">
    <p ref="lolStatus">{{statusText}}</p>
  </div>
</template>

<style scoped>
  #lolStatusContainer{
    width: 161px;
    height: 33px;
    background-color: transparent;
    color: var(--main-color);
    border-color: var(--main-color);
    border-style: solid;
    border-width: thin;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding-bottom: 3.33px;
    margin-left: 1.61vw;

          p{
            font-family: 'pressStart2P';
            font-size: 13.12px;
            letter-spacing: 1.61px;
            font-weight: normal;
          }
  }

  #lolOpener #lolStatusContainer{
    margin-left: 0;
    width: 90%;
    align-self: center;
  }

</style>

<script>
  import { lolState } from '../lolStatus.js'
  import { watch } from 'vue'

  export default {
    name : 'lolStatus',
    data(){
      return{
        statusText: 'FERMÉ...'
      }
    },
    methods: {
      updateVisibleStatus(){
        let currentTheme = this.lolCurrentStatus ? 'open' : 'closed';
        console.log(currentTheme);
        this.statusText = this.lolCurrentStatus ? 'OUVERT !' : 'FERMÉ...';
        document.documentElement.setAttribute('data-theme' , currentTheme);
        this.$refs.lolStatus.style.animation = this.lolCurrentStatus ? 'blink 1.61s infinite' : 'none';
      }
    },
    computed: {
      lolCurrentStatus(){
        return lolState.isOpen
      }
    },
    onMounted(){
      watch(() => this.lolCurrentStatus, () => this.updateVisibleStatus())
    },
    mounted(){
      this.updateVisibleStatus();
      console.log("LOL status is loaded!");
    }
  };
</script>
