<template scope>
  <b-row class="justify-content-center">

    <b-col lg="12" sm="12" xs="12">
      <div class="controllers">
        <toggle-button
        :width="75"
        :labels="{checked:'Scan On', unchecked:'Scan Off'}"
        :value="scan"
        @change="scanBT"
        :sync="true"
        ></toggle-button>
        <b-button @click="getPairedDevices" size="sm" variant="info" v-b-tooltip.hover title="Get paired devices.">
          <i class="fa fa-wifi"></i>
        </b-button>
        <b-dropdown variant="primary" split size="sm">
          <template slot="button-content">
            <i class="fa fa-bluetooth"></i> Controllers
          </template>
          <b-dropdown-item href="#" v-for="controller in controllers" :key="controller.key">{{controller.name}}</b-dropdown-item>
        </b-dropdown>      
      </div>
    </b-col>

    <!-- Paired Devices -->
    <b-col lg="6" sm="12" xs="12">
      <b-card header="<b>Paired Devices</b>">
        <b-list-group>
          <b-list-group-item v-for="device in pairedDevices" :key="device.index">
            <span class="device-name">{{device.name}}</span>
              <div class="pull-right d-f">
                <i 
                  class="fa fa-bluetooth connection-status"
                  v-bind:class="{'active': device.connected === 'yes'}"
                  v-b-tooltip.hover
                  title="Connection Status"
                  >
                </i>
                <div 
                  class="circle-signal"
                  max="100"
                  v-bind:value="device.signal"
                  v-b-tooltip.hover
                  title="Signal Level"
                  v-if="device.signal !== 0"
                  >
                </div>
                <b-dropdown variant="primary" class="m-md-2" size="sm">
                  <b-dropdown-item @click="connect(device.mac)" class="connect" v-show="device.connected !== 'yes'"><i class="fa fa-bluetooth"></i>  Connect</b-dropdown-item>
                  <b-dropdown-item @click="disconnect(device.mac)" class="disconnect" v-show="device.connected == 'yes'"><i class="fa fa-bluetooth"></i>  Disconnect</b-dropdown-item>
                  <b-dropdown-divider></b-dropdown-divider>
                  <b-dropdown-item @click="removeDevice(device.mac)" class="remove"><i class="fa fa-trash"></i> Remove</b-dropdown-item>
                  <b-dropdown-item 
                    @click="rememberBluetooth(device.mac)" 
                    class="rememberDevice"
                    v-b-tooltip.hover
                    title="Auto Connect"
                    v-if="device.mac !== config.bluetoothAutoConnectMac"
                    >
                    <i class="fa fa-bookmark-o" aria-hidden="true"></i> 
                    Remember Device
                  </b-dropdown-item>

                  <b-dropdown-item 
                    @click="forgetBluetooth(device.mac)" 
                    class="rememberDevice"
                    v-b-tooltip.hover
                    title="Auto Connect"
                    v-if="device.mac === config.bluetoothAutoConnectMac"
                    >
                    <i class="fa fa-bookmark-o" aria-hidden="true"></i> 
                    Forget Device
                  </b-dropdown-item>
                  <b-dropdown-divider></b-dropdown-divider>
                  <b-dropdown-header>{{device.mac}}</b-dropdown-header>
                  <b-dropdown-header>
                    <span>Blocked:<i class="fa fa-ban" :class="{'active': device.blocked === 'yes'}"></i></span>
                    <span>Paired: <i class="fa fa-link" :class="{'active': device.paired === 'yes'}"></i></span>
                  </b-dropdown-header>                                    
                </b-dropdown>
              </div>
          </b-list-group-item>
        </b-list-group>
      </b-card>
    </b-col>

    <!-- Other Devices -->
    <b-col lg="6" sm="12" xs="12">
      <b-card header="<b>Other Devices</b>">
        <b-list-group>
          <b-list-group-item v-for="device in notPairedDevices" :key="device.index">
            <span class="device-name">{{device.name}}</span>
              <div class="pull-right d-f">
                <i 
                  class="fa fa-bluetooth connection-status"
                  v-bind:class="{'active': device.connected === 'yes'}"
                  v-b-tooltip.hover
                  title="Connection Status"
                  >
                </i>
                <div 
                  class="circle-signal"
                  max="100"
                  v-bind:value="device.signal"
                  v-b-tooltip.hover
                  title="Signal Level"
                  v-if="device.signal !== 0"
                  >
                </div>
                <b-dropdown variant="primary" class="m-md-2" size="sm">
                  <b-dropdown-item @click="connect(device.mac)" class="connect" v-show="device.connected !== 'yes'"><i class="fa fa-bluetooth"></i>  Connect</b-dropdown-item>
                  <b-dropdown-item @click="disconnect(device.mac)" class="disconnect" v-show="device.connected == 'yes'"><i class="fa fa-bluetooth"></i>  Disconnect</b-dropdown-item>
                  <b-dropdown-divider></b-dropdown-divider>
                  <b-dropdown-header>{{device.mac}}</b-dropdown-header>
                  <b-dropdown-header>
                    <span>Blocked:<i class="fa fa-ban" :class="{'active': device.blocked === 'yes'}"></i></span>
                    <span>Paired: <i class="fa fa-link" :class="{'active': device.paired === 'yes'}"></i></span>
                  </b-dropdown-header>                                    
                </b-dropdown>
              </div>
          </b-list-group-item>
        </b-list-group>
      </b-card>
    </b-col>
  </b-row>
</template>

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

export default {
  name: "Bluetooth",

  computed: {
    ...mapState(["config"]),
    ...mapState("bluetooth", [
      "scan",
      "pairedDevices",
      "notPairedDevices",
      "controllers",
      "rememberedBluetooth",
      "forgetedBluetooth"
    ])
  },

  methods: {
    ...mapActions("bluetooth", [
      "scanBT",
      "getControllers",
      "getDevices",
      "connect",
      "disconnect",
      "getPairedDevices",
      "removeDevice",
      "rememberBluetooth",
      "forgetBluetooth"
    ])
  },

  mounted() {
    this.getControllers();
    this.getDevices();
  },

  watch: {
    "rememberedBluetooth.status"(newValue) {
      if (newValue === true) {
        app.Toasted(
          "Bluetooth",
          `Device remembered: ${this.rememberedBluetooth.deviceMac}`,
          "success"
        );
      } else if (newValue == false) {
        app.Toasted(
          "Bluetooth",
          `Device remember fail: ${this.rememberedBluetooth.deviceMac}`,
          "warning"
        );
      }
      this.rememberedBluetooth.status = null;
    },

    "forgetedBluetooth.status"(newValue) {
      if (newValue === true) {
        app.Toasted(
          "Bluetooth",
          `Device forgeted: ${this.forgetedBluetooth.deviceMac}`,
          "success"
        );
      } else if (newValue === false) {
        app.Toasted(
          "Bluetooth",
          `Device forget fail: ${this.forgetedBluetooth.deviceMac}`,
          "warning"
        );
      }
      this.forgetedBluetooth.status = null;
    }
  }
};
</script>

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

// Circle Signal
.circle-signal {
  font-size: 27px;
  border: 2px solid $gray;
  position: relative;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  overflow: hidden;
  background: #8e8c8c;
  cursor: default;

  &:after {
    content: attr(value) "%";
    display: block;
    position: absolute;
    font-size: 10px;
    font-weight: bold;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: $white;
  }

  &:before {
    content: " ";
    width: 100%;
    background: $bluetooth;
    position: absolute;
    bottom: 0px;
  }

  // Generate percentage sizes
  @for $i from 1 through 100 {
    &[value="#{$i}"] {
      &:before {
        height: 0% + $i;
      }
    }
  }
}

.dropdown {
  .dropdown-menu {
    .dropdown-item {
      font-size: 12px;

      &:focus {
        outline: none;
      }
    }

    .dropdown-header {
      font-size: 12px;
    }
  }
}

.controllers {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 20px 0px 20px 0px;

  .btn,
  .dropdown {
    margin-left: 10px;
  }

  .dropdown {
    .dropdown-menu {
      .dropdown-item {
        font-size: 12px;

        &:focus {
          outline: none;
        }
      }
    }
  }

  .vue-js-switch {
    margin-bottom: 0px;
    margin-left: 10px;
  }

  .bt-controller {
    border: 1px solid red;
    .btn-sm {
      padding: 0px;
      margin: 0px;
      line-height: normal;
      height: 25px;
    }
  }
}

.card {
  margin-bottom: 20px;

  .card-header {
    font-size: 14px;
  }

  .card-body {
    padding: 0.7rem;

    .list-group {
      .list-group-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 5px;

        .device-name {
          font-size: 13px;
        }

        .connection-status {
          font-size: 20px;
          color: $gray;
          cursor: default;

          &.active {
            color: $bluetooth;
          }
        }

        .circle-signal {
          margin-left: 10px;
        }

        .dropdown {
          margin-left: 10px;
          .dropdown-item {
            transition: 0.5s all ease-in-out;

            &.connect {
              background-color: $primary;
              color: $white;

              &:hover {
                background-color: darken($primary, 5);
              }
            }

            &.disconnect {
              background-color: $danger;
              color: $white;

              &:hover {
                background-color: darken($danger, 5);
              }
            }

            &.remove {
              background-color: $warning;

              &:hover {
                background-color: lighten($warning, 10);
              }
            }

            &.rememberDevice {
              background-color: $info;
              color: $white;

              &:hover {
                background-color: darken($info, 5);
              }
            }
          }

          .dropdown-header {
            i.fa {
              &.active {
                color: $bluetooth;
              }
            }
          }
        }
      }
    }
  }
}
</style>
