<template>
  <div id="cameraSettings">
    <div class="uk-grid uk-grid-divider uk-child-width-expand" uk-grid>
      <div class="uk-width-large">
        <h3>Manual camera settings</h3>
        <form @submit.prevent="applySettingsRequest">
          <div class="uk-margin-small-bottom">
            <h4>Raspberry Pi Camera</h4>
            <!--PiCamera settings block-->
            <div v-if="picamera.shutter_speed !== undefined">
              <label class="uk-form-label" for="form-stacked-text"
                >Exposure time</label
              >
              <div class="uk-form-controls">
                <input
                  v-model="picamera.shutter_speed"
                  class="uk-input uk-form-small"
                  type="number"
                />
              </div>
            </div>

            <div v-if="picamera.analog_gain !== undefined">
              <label class="uk-form-label" for="form-stacked-text"
                >Analogue gain</label
              >
              <div class="uk-form-controls">
                <input
                  v-model="picamera.analog_gain"
                  class="uk-input uk-form-small"
                  type="number"
                  step="0.000001"
                />
              </div>
            </div>

            <div v-if="picamera.digital_gain !== undefined">
              <label class="uk-form-label" for="form-stacked-text"
                >Digital gain</label
              >
              <div class="uk-form-controls">
                <input
                  v-model="picamera.digital_gain"
                  class="uk-input uk-form-small"
                  type="number"
                  step="0.000001"
                />
              </div>
            </div>
          </div>

          <div class="uk-margin-small-bottom">
            <h4>Image quality</h4>

            <div class="uk-child-width-1-2" uk-grid>
              <div v-if="mjpeg_quality !== undefined">
                <label class="uk-form-label" for="form-stacked-text"
                  >Web stream quality (%)</label
                >
                <div class="uk-form-controls">
                  <input
                    v-model="mjpeg_quality"
                    class="uk-input uk-form-small"
                    type="number"
                    step="1"
                  />
                </div>
              </div>

              <div v-if="jpeg_quality !== undefined">
                <label class="uk-form-label" for="form-stacked-text"
                  >JPEG capture quality (%)</label
                >
                <div class="uk-form-controls">
                  <input
                    v-model="jpeg_quality"
                    class="uk-input uk-form-small"
                    type="number"
                    step="1"
                  />
                </div>
              </div>
            </div>
          </div>

          <button
            type="submit"
            class="uk-button uk-button-primary uk-margin-small uk-width-1-1"
          >
            Apply Settings
          </button>
        </form>

        <h3>Automatic calibration</h3>
        <cameraCalibrationSettings></cameraCalibrationSettings>
      </div>

      <div id="mini-stream">
        <miniStreamDisplay />
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import cameraCalibrationSettings from "./cameraSettingsComponents/cameraCalibrationSettings.vue";
import miniStreamDisplay from "../../genericComponents/miniStreamDisplay.vue";

// Export main app
export default {
  name: "CameraSettings",

  components: {
    cameraCalibrationSettings,
    miniStreamDisplay
  },

  data: function() {
    return {
      picamera: {
        shutter_speed: undefined,
        analog_gain: undefined,
        digital_gain: undefined
      },
      mjpeg_quality: undefined,
      jpeg_quality: undefined
    };
  },

  computed: {
    settingsUri: function() {
      return `${this.$store.getters.baseUri}/api/v2/instrument/settings`;
    }
  },

  mounted() {
    this.updateSettings();
  },

  methods: {
    updateSettings: function() {
      axios
        .get(this.settingsUri)
        .then(response => {
          const cameraSettings = response.data.camera;
          // Get base camera settings
          this.mjpeg_quality = cameraSettings.mjpeg_quality;
          this.jpeg_quality = cameraSettings.jpeg_quality;
          // Get Pi Camera settings if they exist
          if (cameraSettings.picamera) {
            this.picamera.analog_gain = cameraSettings.picamera.analog_gain;
            this.picamera.digital_gain = cameraSettings.picamera.digital_gain;
            this.picamera.shutter_speed = cameraSettings.picamera.shutter_speed;
          }
        })
        .catch(error => {
          this.modalError(error); // Let mixin handle error
        });
    },

    applySettingsRequest: function() {
      // We have to use parseInt/parseFloat because JS sometimes seems to
      // make the numbers be strings... TypeScript would solve this...
      var payload = {
        camera: {
          mjpeg_quality: parseInt(this.mjpeg_quality),
          jpeg_quality: parseInt(this.jpeg_quality),
          picamera: {
            shutter_speed: parseFloat(this.picamera.shutter_speed),
            analog_gain: parseFloat(this.picamera.analog_gain),
            digital_gain: parseFloat(this.picamera.digital_gain)
          }
        }
      };
      console.log(payload);
      // Send request
      axios
        .put(this.settingsUri, payload)
        .then(() => {
          return new Promise(r => setTimeout(r, 500));
        }) // why is there no built-in for this??!
        .then(() => {
          // Update local settings
          this.updateSettings();
          this.modalNotify("Camera settings applied.");
        })
        .catch(error => {
          this.modalError(error); // Let mixin handle error
        });
    }
  }
};
</script>

<style lang="less">
#mini-stream {
  min-width: 300px;
  max-width: 600px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
}
</style>
