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

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

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

  #lolOpener #lolStatusContainer{
    padding-top: 3.33px;
    margin-left: 0;
    width: 90%;
    align-self: center;

    @media(min-width: 700px){
      width: 44%;
    }
  }

</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';
        let pageIcon = document.querySelector('link');
        //console.log(currentTheme);
        console.log(pageIcon.href);
        this.statusText = this.lolCurrentStatus ? 'OUVERT !' : 'FERMÉ...';
        document.documentElement.setAttribute('data-theme' , currentTheme);
        document.querySelector('link').href = this.lolCurrentStatus ? './src/assets/favicon_open.svg' : './src/assets/favicon.svg'
        this.$refs.lolStatus.style.animation = this.lolCurrentStatus ? 'blink 3.33s infinite' : 'none';
      }
    },
    computed: {
      lolCurrentStatus(){
        return lolState.isOpen
      }
    },
    onMounted(){
      watch(() => this.lolCurrentStatus, () => this.updateVisibleStatus())
    },
    mounted(){
      this.updateVisibleStatus();
      console.log("LOL status is loaded!");
    }
  };
</script>
