<html>

<head>
  <title>UA Smash Upcoming</title>

  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">

  <style>
    body {
      background-color: rgba(0, 0, 0, 0);
      margin: 0px auto;
      overflow: hidden;
    }

    .css-selector {
      background: linear-gradient(225deg, #0098ff, #ff2f00);
      background-size: 400% 400%;
      animation: waitingScreenBackground 31s ease infinite;
    }

    @keyframes waitingScreenBackground {
      0%{background-position:0% 51%}
      50%{background-position:100% 50%}
      100%{background-position:0% 51%}
    }

    .list-move, /* apply transition to moving elements */
    .list-enter-active,
    .list-leave-active {
      transition: all 0.5s ease;
    }

    .list-enter-from,
    .list-leave-to {
      opacity: 0;
      transform: translateY(15px);
    }

    /* ensure leaving items are taken out of layout flow so that moving
    animations can be calculated correctly. */
    .list-leave-active {
      position: absolute;
    }

  </style>

  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>

  <script src="https://unpkg.com/vue@3"></script>

</head>

<body>
  <div id="app">

      <div v-if="type == 0" class="container-fluid" style="width: 1920px; height: 1080px;">

        <div class="row justify-content-left row-cols-1" style="padding-top: 80px; width: 17em;">
          
          <transition-group name="list">
            <template v-for="(item,index) in setList" :key="item">
              <div class="col mb-2" v-if="item.state == 1">
                
                <upcoming-match-card :team-one="item.teamOne" :team-two="item.teamTwo" :pre-reqs="item.preReqs" :event-name="item.eventName" :full-round-text="item.fullRoundText">
                </upcoming-match-card>

              </div>
            </template>
          </transition-group>

        </div>

      </div>

      <div v-if="type == 1" class="container-fluid css-selector" style="width: 1920px; height: 1080px;">

        <div class="row" style="padding-top: 25px; padding-left: 25px; color: white;">
          <h1>UPCOMING MATCHES</h1>
        </div>

        <div class="row justify-content-center row-cols-6" style="padding-top: 25px; padding-left: 50px; padding-right: 50px;">
          
          <transition-group name="list">
            <template v-for="(item,index) in setList" :key="item">
              <div class="col mb-3">
                
                <upcoming-match-card :team-one="item.teamOne" :team-two="item.teamTwo" :pre-reqs="item.preReqs" :event-name="item.eventName" :full-round-text="item.fullRoundText">
                </upcoming-match-card>

              </div>
            </template>
          </transition-group>

        </div>

      </div>

    </div>

  </div>
</body>

<script type="module">
  import StartGGAPI from '/javascripts/StartGGAPI.js'
  import QueueManager from '/javascripts/QueueManager.js'
  import OverlayDataManager from '/javascripts/OverlayDataManager.js'
  import UpcomingMatchCard from '/javascripts/UpcomingMatchCard.js'
  const { createApp } = Vue

  const upcomingApp = createApp({
    data() {
      return {
        apiKey: '',
        setList: [],
        preReqList: {},
        type: 0,
        slug: null,
        room: null,
      }
    },
    mounted() {
      
      const urlParams = new URLSearchParams(window.location.search)
      const type = urlParams.get('type')
      const key = urlParams.get('key')
      const startgg_key = urlParams.get('startgg_key')

      if(type != null) {
        this.type = type
      }
      if(key != null) {
        this.room = key
      }
      if(startgg_key != null) {
        this.apiKey = startgg_key
      }

      if(this.room != null) {

        OverlayDataManager.importOverlaySettings(window.location.origin,this.room).then((data) => {

          if(data.settings != null) {

            this.slug = data.settings.slug

            try {

              if(this.apiKey != null && this.slug != null){

                this.querySets()
                setInterval(function() { 
                  upcomingApp.querySets() 
                }, 10000)

              } else {
                alert("Required URL parameters missing.")
              } 

            } catch(e) {
              alert(e)
            }

          } else {
            alert("Unable to load configuration settings or required URL parameters missing.")
          }

        })

      } else {

        this.slug = urlParams.get('slug')

        if(this.apiKey != null && this.slug != null){

          this.querySets()
          setInterval(function() { 
            upcomingApp.querySets() 
          }, 10000)

        } else {
          alert("Required URL parameters missing.")
        }

      }

    },
    methods : {
      async querySets() {

        const sets = await StartGGAPI.queryUpcomingMatches(this.apiKey,this.slug)

        /*
        sets.forEach(item => {
          this.preReqList[item.id] = item

          const order = this.finalsOrder[item.fullRoundText.replace(/Winners |Losers /g,'')]              
          if(order != null) {
            if(item.fullRoundText.indexOf('Winner') >= 0) {

            } else {

            }
          }

          //item.eventName = item.eventName.toUpperCase()
          //item.phaseName = item.phaseName.toUpperCase()
          //item.fullRoundText = item.fullRoundText.toUpperCase()
        })*/

        QueueManager.refreshQueue(this.setList,sets)

      },
    },
    components: {
      UpcomingMatchCard,
    }
  }).mount('#app')

</script>

</html>
