<template>
  <Teleport to="#eventSection" defer>
    <div id="eventContainer">
      <div class="eventEntry" v-for="item of displayedEvents" :key="item.title" @click="openEvent(item)">
        <div class="titleSection">
          <p class="title">{{item.title}}</p>
          <p class="date">{{item.date}} &rarr; {{item.time}}</p>
        </div>
        <div class="subtitleSection">
          <p class="subtitle">{{item.subtitle}}</p>
        </div>
      </div>
    </div>
  </Teleport>
</template>

<style scoped>
  #eventContainer{
    width:100%;
    height: auto;
    max-height: 90vh;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7.77px;
    padding-top: 7.77px;
    box-sizing: border-box;

    @media(min-width: 700px){
      max-height: 54vh;
    }
    @media(min-width: 1300px){
      max-height: 46.5vh;
    }

          .eventEntry{
            width: 90%;
            height: auto;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            border-color: var(--back-color);
            border-style: solid;
            border-width: thin;
            border-radius: 16.1px;
            flex-shrink: 0;
            gap: 0;

                  .titleSection{
                    width: 100%;
                    height: 44px;
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-start;
                    align-items: center;
                    box-sizing: border-box;
                    padding-top: 7.77px;
                    pointer-events: none;

                    p{
                      font-family: 'velvelyne';
                      font-size: 16.1px;
                      font-weight: bold;
                      color: var(--back-color);
                      height: 50%;
                      margin: 0;
                      padding: 0;
                      text-transform: uppercase;
                    }

                    p.date{
                      font-family: 'karrik';
                      font-weight: normal;
                      font-size: 9px;
                      text-transform: none;
                    }

            }

            .subtitleSection{
              width: 100%;
              height: auto;
              padding-right: 16.1px;
              padding-left: 16.1px;
              box-sizing: border-box;
              position: relative;
              margin-top: 0;
              padding-top: 0;
              pointer-events: none;

                    p{
                      font-family: 'velvelyne';
                      font-size: 13.12px;
                      font-weight: normal;
                      color: var(--back-color);
                      white-space: pre-line;
                    }
            }
    }

    .eventEntry:hover{
      background-color: var(--back-color);
      color: var(--main-color);

      p{
        color: var(--main-color);
      }
    }
  }

</style>

<script>
  import { watch } from 'vue'
  import { lolEventsList } from '../lolEvents.js'
  import { dataStorage } from '../dataExchange.js'

  export default {
    name : 'EventContent',
    methods: {
      openEvent(obj){
        console.log('updating...')
        dataStorage.selectedEvent = obj;
        if (dataStorage.activePannels.includes('event')){
          dataStorage.focus = 'event'
        } else {
          dataStorage.activePannels.push('event')
          dataStorage.focus = 'event'
        }
      }
    },
    computed: {
      displayedEvents(){
        return lolEventsList
      }
    },
    mounted(){
      console.log("Event list is loaded!");
    }
  };
</script>
