<template>
  <div id="app">
    <!-- Header -->
    <b-navbar toggleable="md" type="dark" variant="dark">
      <b-navbar-brand to="/">
        <img src="images/smg-logo.png" class="nav-logo" alt>
      </b-navbar-brand>

      <b-navbar-toggle id="nav_collapse" target="nav_collapse"></b-navbar-toggle>

      <b-collapse is-nav id="nav_collapse" right>
        <b-navbar-nav class="ml-lg-auto">
          <b-nav-item to="Schedules">
            <i class="fa fa-music"></i>
            <span>Schedules</span>
          </b-nav-item>
          <b-nav-item to="Dj" v-show="config.hasDj === '1'">
            <i class="fa fa-headphones"></i>
            <span>DJ</span>
          </b-nav-item>
          <b-nav-item to="Announces">
            <i class="fa fa-bullhorn"></i>
            <span>Announces</span>
          </b-nav-item>
          <b-nav-item to="Downloads">
            <i class="fa fa-download"></i>
            <span>Downloads</span>
          </b-nav-item>
          <b-nav-item to="Settings">
            <i class="fa fa-cog"></i>
            <span>Settings</span>
          </b-nav-item>
          <b-nav-item to="Information">
            <i class="fa fa-info-circle"></i>
            <span>Information</span>
          </b-nav-item>
          <b-nav-item to="Stream">
            <i class="fa fa-google-wallet"></i>
            <span>Stream</span>
          </b-nav-item>
          <b-nav-item v-show="config.hasBluetooth" to="Bluetooth">
            <i class="fa fa-bluetooth"></i>
            <span>Bluetooth</span>
          </b-nav-item>
          <b-nav-item v-show="config.prayerEnabled === '1'">
            <i class="fa fa-volume-off" v-if="itsPrayerTime"></i>
            <i class="fa fa-volume-up" v-if="!itsPrayerTime"></i>
            <span>Prayer Time</span>
          </b-nav-item>
          <b-nav-item v-show="config.hasVolumeControl === '1'" class="vol">
            <i class="fa fa-volume-down"></i>
            <input type="range" min="0" max="100" class="slider" step="5" v-model="masterVolume"
              @input="onVolumeChange" />
            <i class="fa fa-volume-up"></i>
          </b-nav-item>
        </b-navbar-nav>
      </b-collapse>
    </b-navbar>

    <!-- Main Container -->
    <b-container fluid>
      <b-row>
        <b-col cols="12">
          <h1 class="page-title" v-text="this.$route.name"></h1>
        </b-col>
      </b-row>
    </b-container>
    <b-container id="main-container">
      <router-view></router-view>
    </b-container>

    <media-player></media-player>

    <!-- Footer -->
    <b-navbar id="footer" type="dark" variant="dark">© SMG Multimedia</b-navbar>

    <div class="disconnectedOverlay"></div>
  </div>
</template>

<script>
import { mapGetters, mapActions, mapState } from "vuex";

export default {
  name: "App",

  methods: {
    ...mapActions("settings", ["changeVolume"]),
    onVolumeChange(event) {
      console.log('Volume slider changed:', {
        value: event.target.value,
        masterVolume: this.masterVolume,
        event: 'volume slider change'
      });
      this.changeVolume(parseInt(event.target.value));
    }
  },
  computed: {
    ...mapState(["connected", "itsPrayerTime", "config", "masterVolume"]),
    ...mapGetters(["config"]),
    masterVolume: {
      get() {
        return this.$store.state.masterVolume;
      },

      set(value) {
        this.$store.commit('masterVolume', value);
        this.changeVolume(value);
      }
    }
  },

  mounted() {
    // Navigation Mobile Collpase Link Clicked Collapsed

    let navLinks = document.querySelectorAll(".nav-link"),
      navCollapse = document.getElementById("nav_collapse");

    for (let i = 0; i < navLinks.length; i++) {
      navLinks[i].addEventListener("click", function () {
        if (window.innerWidth < 1200) {
          navCollapse.click();
        }
      });
    }
  },

  watch: {
    connected(newValue) {
      if (!newValue) {
        document.body.classList.add("disconnected");
      } else {
        document.body.classList.remove("disconnected");
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "styles/sass/variables";

.navbar {
  .navbar-nav {
    .nav-item {
      .nav-link {
        display: flex;
        align-content: center;
        align-items: center;
        transition: 0.3s all ease-in-out;
        padding-left: 15px;
        padding-right: 15px;
        border-bottom: 2px solid transparent;
        font-size: 14px;
        outline: none;

        &.active {
          border-bottom-color: $smg;
        }

        i.fa {
          margin-right: 10px;
          align-self: center;
        }
      }
    }
  }

  .nav-logo {
    max-height: 50px;
  }

  .vol {
    margin-top: 3px;
  }

  i.fa-volume-up {
    margin-left: 10px;
  }

  .slider {
    -webkit-appearance: none;
    /* Override default CSS styles */
    appearance: none;
    height: 5px;
    background: #6a6d71;
    outline: none;
    border-radius: 25px;

  }


  .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    border-radius: 50%;
    height: 18px;
    width: 18px;
    background: $smg;
    cursor: pointer;
  }

  /*remove dotted border on select*/
  .slider::-moz-focus-outer {
    border: 0;

  }

  .slider::-moz-range-progress {
    background: $smg;
    border-radius: 25px;
    border-color: $smg;
    height: 5px;
  }

  .slider::-moz-range-thumb {
    background: #fff;
    border-radius: 50%;
    border-color: #fff;
    cursor: pointer;
  }

  @media (max-width: 1200px) {
    justify-content: space-between;

    .navbar-toggler {
      display: block;
    }

    .navbar-brand {
      z-index: 10002;
    }

    .navbar-toggler {
      z-index: 10001;
      outline: none !important;
    }

    .navbar-collapse {
      position: absolute !important;
      display: flex !important;
      transition: 0.5s all ease-in-out !important;
      background-color: #343a40 !important;
      padding: 20px;

      @media (min-width: 480px) and (max-width: 1200px) {
        justify-content: center;
      }
    }

    .navbar-toggler[aria-expanded="false"]+.navbar-collapse {
      width: 0vw !important;
      height: 100vh !important;
      top: 0 !important;
      padding: 0px;
      opacity: 1;
      right: 0;
      z-index: 9000;
      overflow: hidden;
    }

    .navbar-toggler[aria-expanded="true"]+.navbar-collapse {
      width: 100vw !important;
      height: 100vh !important;
      padding: 20px;
      right: 0px;
      top: 0 !important;
      z-index: 10000;
    }

    .navbar-collapse {
      .navbar-nav {
        flex-direction: column;
        margin-left: 0px !important;

        .nav-item {
          .nav-link {
            transition: 0.2s all ease-in-out;
            padding-left: 10px;
            border-left: 2px solid transparent;
            border-bottom: unset;
            font-size: 16px;

            &.active {
              border-left-color: #fe4f02;
            }
          }
        }
      }
    }
  }
}

@media (min-width: 1200px) {
  .navbar {
    .navbar-nav {
      .nav-item {
        & .nav-link {
          min-width: 100px;
          text-align: center;
          display: flex;
          justify-content: center;
        }
      }
    }
  }
}
</style>
