<template>
  <div>
    <h3>{{ $t('status.title') }}</h3>

    <div v-if="static === null" class="loading">
      <LoadingIndicator></LoadingIndicator>
    </div>

    <div v-else>
      <Radio :title="$i18n.t('status.static')" v-model="type" id="static"></Radio>

      <div class="slidercontainer">
        <input type="range" min="0" max="255" class="slider red" v-model.number="static.r">
      </div>
      <div class="slidercontainer">
        <input type="range" min="0" max="255" class="slider green" v-model.number="static.g">
      </div>
      <div class="slidercontainer">
        <input type="range" min="0" max="255" class="slider blue" v-model.number="static.b">
      </div>
      <div class="slidercontainer">
        <input type="range" min="0" max="255" class="slider white" v-model.number="static.w">
      </div>

      <div class="buttons">
        <a class="button button-secondary" @click.prevent="staticOff">{{ $t('status.staticOff') }}</a>
      </div>

      <Radio :title="$i18n.t('status.rainbow.title')" v-model="type" id="rainbow"></Radio>

      <p>{{ $i18n.t('status.rainbow.speed') }}</p>
      <div class="slidercontainer">
        <input type="range" min="0" max="200" class="slider white" v-model.number="rainbow.speed">
      </div>

      <p>{{ $i18n.t('status.rainbow.lightness') }}</p>
      <div class="slidercontainer">
        <input type="range" min="0" max="255" class="slider white" v-model.number="rainbow.lightness">
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import LoadingIndicator from '@/components/loadingIndicator.vue';
import BaseVM from '@/BaseVM';
import Radio from '@/components/radio.vue';

export default {
  mixins: [BaseVM],

  components: {
    LoadingIndicator,
    Radio
  },

  data()
  {
    return {
      type: 'static',
      static: null,
      rainbow: null
    }
  },


  mounted()
  {
    const self = this;

    self.updating = false;
    self.updateTimer = false;

    self.load()
      .then(() =>
      {
        self.$watch(
          () =>
          {
            return [
              this.type,
              this.static.r, this.static.g, this.static.b, this.static.w,
              this.rainbow.speed, this.rainbow.lightness
            ];
          },
          () =>
          {
            self.changed();
          });
      });
  },


  methods: {
    load()
    {
      const self = this;

      // TODO load current settings (no API for it yet)
      self.static = {
        r: 0,
        g: 0,
        b: 0,
        w: 0
      };

      self.rainbow = {
        speed: 0,
        lightness: 128
      };

      return Promise.resolve(true);
    },


    staticOff()
    {
      this.static = {
        r: 0,
        g: 0,
        b: 0,
        w: 0
      };
    },


    changed()
    {
      const self = this;

      if (self.updateTimer === false)
        self.updateTimer = setTimeout(() =>
        {
          self.update();
        }, 200);
    },


    update()
    {
      console.log(this.type);
      const self = this;

      if (self.updating)
      {
        self.updateTimer = setTimeout(() =>
        {
          self.update();
        }, 200);

        return;
      }


      let url;
      let params;

      switch (this.type)
      {
        case 'static':
          url = '/api/set/static';
          params = {
            r: this.static.r,
            g: this.static.g,
            b: this.static.b,
            w: this.static.w,
            fadeTime: 200
          };
          break;

        case 'rainbow':
          url = '/api/set/rainbow';
          params = this.rainbow;
          break;

        default:
          return;
      }


      self.updating = true;
      self.updateTimer = false;

      axios.get(url, { params: params })
        .then(response =>
        {
        })
        .catch(e => self.handleAPIError('error.setColor', e))
        .then(() =>
        {
          self.updating = false;
        });
    }
  }
}
</script>
