<template>
<div id="cameraSettings">
  <form @submit.prevent="applyConfigRequest">
      <div>
        <label class="uk-form-label" for="form-stacked-text">Exposure time</label>
        <div class="uk-form-controls">
          <input v-model="displayShutterSpeed" class="uk-input uk-form-small" type="number">
        </div>
      </div>

      <div>
        <label class="uk-form-label" for="form-stacked-text">Analogue gain</label>
        <div class="uk-form-controls">
          <input v-model="displayAnalogGain" class="uk-input uk-form-small" type="number" step="0.01">
        </div>
      </div>

      <div>
        <label class="uk-form-label" for="form-stacked-text">Digital gain</label>
        <div class="uk-form-controls">
          <input v-model="displayDigitalGain" class="uk-input uk-form-small" type="number" step="0.01">
        </div>
      </div>

    <button type="submit" class="uk-button uk-button-primary uk-form-small uk-float-right uk-margin-small uk-width-1-1">Apply Settings</button>
    
    <div v-if="isCalibrating">
      <progressBar/>
    </div>

    <div v-bind:hidden="isCalibrating">
      <button type="button" v-on:click="recalibrateConfirm()" class="uk-button uk-button-default uk-form-small uk-float-right uk-margin-small uk-width-1-1">Auto-Calibrate</button>
    </div>


  </form>

</div>

</template>

<script>
import axios from 'axios'
import progressBar from "../../genericComponents/progressBar"

// Export main app
export default {
  name: 'microscopeSettings',

  components: {
    progressBar
  },

  data: function () {
    return {
      shutterSpeed: this.$store.state.apiConfig.camera_settings.picamera_settings.shutter_speed,
      analogGain: this.$store.state.apiConfig.camera_settings.picamera_settings.analog_gain,
      digitalGain: this.$store.state.apiConfig.camera_settings.picamera_settings.digital_gain,
      isCalibrating: false
    }
  },

  methods: {
    updateInputValues: function () {
      this.shutterSpeed = this.$store.state.apiConfig.camera_settings.picamera_settings.shutter_speed
      this.digitalGain = this.$store.state.apiConfig.camera_settings.picamera_settings.digital_gain
      this.analogGain = this.$store.state.apiConfig.camera_settings.picamera_settings.analog_gain
    },

    applyConfigRequest: function() {
      console.log("Applying config to the microscope")
      var payload = {
        picamera_settings: {}
      }

      //if (this.shutterSpeed != this.$store.state.apiConfig.picamera_settings.shutter_speed) {
      payload.camera_settings.picamera_settings.shutter_speed = this.shutterSpeed
      payload.camera_settings.picamera_settings.analog_gain = this.analogGain
      payload.camera_settings.picamera_settings.digital_gain = this.digitalGain
      //};

      // Send request
      axios.post(this.configApiUri, payload)
        .then(response => { return new Promise(r => setTimeout(r, 500))}) // why is there no built-in for this??!
        .then(response => { 
          return this.$store.dispatch('updateConfig');
        })
        .then(this.updateInputValues)
        .then(r=>{console.log("Updated Config: ", payload.picamera_settings)})
        .catch(error => {
          this.modalError(error) // Let mixin handle error
        })
    },
    recalibrateConfirm: function() {
      var context = this
      this.modalConfirm('Start recalibration? This may take a while, and the microscope will be locked during this time.')
        .then(function() {
          context.recalibrateRequest()
        }, function () {
          console.log('Rejected recalibration.')
        })
    },
    recalibrateRequest: function() {
      // Send move request
      axios.post(this.recalibrateApiUri)
        .then(response => { 
          console.log("Task ID: " + response.data.id)
          this.isCalibrating = true
          return this.$store.dispatch('pollTask', [response.data.id, null, null])
        })
        .then(() => {
          this.modalNotify("Finished recalibration.")
          return new Promise(r => setTimeout(r, 500)) // wait 500ms before updating config, so it's fresh
        })
        .then(() => {
          return this.$store.dispatch('updateConfig');
        })
        .then(this.updateInputValues)
        .catch(error => {
          this.modalError(error) // Let mixin handle error
        })
        .finally(() => {
          this.isCalibrating = false
        })
    }

  },

  computed: {
    displayDigitalGain: function () {
      return Number(this.digitalGain).toFixed(2)
    },
    displayAnalogGain: function () {
      return Number(this.analogGain).toFixed(2)
    },
    displayShutterSpeed: function () {
      return (this.shutterSpeed != 0) ? this.shutterSpeed : "auto"
    },
    recalibrateApiUri: function () {
      return this.$store.getters.uri + "/plugin/default/camera_calibration/recalibrate"
    },
    configApiUri: function () {
      return this.$store.getters.uri + "/config"
    }
  }

}
</script>

<style lang="less">
.center-spinner {
  margin-left: auto;
  margin-right: auto
}
</style>
