<template>
  <form @submit.prevent="save">
    <h3>{{ $t('connection.title') }}</h3>

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

    <div v-else>
      <check v-model.boolean="connection.accesspoint" :title="$t('connection.accesspoint')"></check>
      <span class="hint">{{ $t('connection.accesspointHint') }}</span>

      <check v-model.boolean="connection.station" :title="$t('connection.stationmode')"></check>
      <span class="hint">{{ $t('connection.stationmodeHint') }}</span>

      <label for="ssid">{{ $t('connection.ssid') }}</label>
      <input type="text" id="ssid" v-model="connection.ssid" :disabled="!connection.station">

      <label for="password">{{ $t('connection.password') }}</label>
      <input type="password" id="password" v-model="connection.password" :disabled="!connection.station">

      <check v-model.boolean="connection.dhcp" :disabled="!connection.station" :title="$t('connection.dhcp')" class="form-control"></check>
      <span class="hint">{{ $t('connection.dhcpHint') }}</span>


      <div class="suboptions">
        <label for="ip">{{ $t('connection.ipaddress') }}</label>
        <input type="text" id="ip" v-model="connection.ip" :disabled="!connection.station || connection.dhcp">

        <label for="subnetmask">{{ $t('connection.subnetmask') }}</label>
        <input type="text" id="subnetmask" v-model="connection.subnetmask" :disabled="!connection.station || connection.dhcp">

        <label for="gateway">{{ $t('connection.gateway') }}</label>
        <input type="text" id="gateway" v-model="connection.gateway" :disabled="!connection.station || connection.dhcp">
      </div>


      <label for="hostname">{{ $t('connection.hostname') }}</label>
      <input type="text" :placeholder="$t('connection.hostnamePlaceholder')" id="hostname" v-model="connection.hostname" :disabled="!connection.station">
      <span class="hint">{{ $t('connection.hostnameHint') }}</span>

      <div class="buttons">
        <input type="submit" :disabled="saving" :value="saving ? $t('applyButtonSaving') : $t('applyButton')">
      </div>
    </div>
  </form>
</template>

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

export default {
  mixins: [BaseVM],

  components: {
    LoadingIndicator,
    check
  },

  data()
  {
    return {
      connection: null
    }
  },


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


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

      return axios.get('/api/connection', { retry: 10, retryDelay: 1000 })
        .then(response =>
        {
          if (typeof response.data == 'object')
            self.connection = response.data;
        })
        .catch(e => self.handleAPIError('error.loadConnection', e));
    },


    save()
    {
      const self = this;
      if (self.saving)
        return;

      self.setSaving(true);

      axios.post('/api/connection', {
          hostname: self.connection.hostname,
          accesspoint: self.connection.accesspoint,
          station: self.connection.station,
          ssid: self.connection.ssid,
          password: self.connection.password,
          dhcp: self.connection.dhcp,
          ip: self.connection.ip,
          subnetmask: self.connection.subnetmask,
          gateway: self.connection.gateway,
      }, { retry: 10, retryDelay: 1000, headers: { 'Content-Type': 'application/json' } })
        .then(response => {})
        .catch(e => self.handleAPIError('error.applyConnection', e))
        .then(() =>
        {
          self.setSaving(false);
        });
    }
  }
}
</script>