<template>
    <v-container v-if="server">
        <v-row>
            <v-col cols="12">
                <v-card dark>
                    <v-list-item>
                        <v-list-item-content>
                            <v-list-item-title class="headline">Interface configuration serveur</v-list-item-title>
                        </v-list-item-content>
                    </v-list-item>
                    <div class="d-flex flex-no-wrap justify-space-between">
                        <v-col cols="12">
                            <v-text-field
                                    v-model="server.publicKey"
                                    label="Clé publique"
                                    disabled
                            />
                            <v-text-field
                                    v-model="server.listenPort"
                                    type="number"
                                    :rules="[
                          v => !!v || 'Le port en écoute est requis',
                        ]"
                                    label="Port en écoute"
                                    required
                            />
                            <v-combobox
                                    v-model="server.address"
                                    chips
                                    hint="Saisir le CIDR IPv4 ou IPv6 et appuyez sur touche Entrée"
                                    label="Adresse interfaces serveur"
                                    multiple
                                    dark
                            >
                                <template v-slot:selection="{ attrs, item, select, selected }">
                                    <v-chip
                                            v-bind="attrs"
                                            :input-value="selected"
                                            close
                                            @click="select"
                                            @click:close="server.address.splice(server.address.indexOf(item), 1)"
                                    >
                                        <strong>{{ item }}</strong>&nbsp;
                                    </v-chip>
                                </template>
                            </v-combobox>
                        </v-col>
                    </div>
                </v-card>
            </v-col>
            <v-col cols="12">
                <v-card dark>
                    <v-list-item>
                        <v-list-item-content>
                            <v-list-item-title class="headline">Configuration globale du client</v-list-item-title>
                        </v-list-item-content>
                    </v-list-item>
                    <div class="d-flex flex-no-wrap justify-space-between">
                        <v-col cols="12">
                            <v-text-field
                                    v-model="server.endpoint"
                                    label="Point accès public connexion client"
                                    :rules="[
                          v => !!v || 'Point accès public connexion client est requis',
                        ]"
                                    required
                            />
                            <v-combobox
                                    v-model="server.dns"
                                    chips
                                    hint="Saisir adresse IPv4 ou IPv6 et appui sur touche Entrée"
                                    label="Serveurs DNS pour les clients"
                                    multiple
                                    dark
                            >
                                <template v-slot:selection="{ attrs, item, select, selected }">
                                    <v-chip
                                            v-bind="attrs"
                                            :input-value="selected"
                                            close
                                            @click="select"
                                            @click:close="server.dns.splice(server.dns.indexOf(item), 1)"
                                    >
                                        <strong>{{ item }}</strong>&nbsp;
                                    </v-chip>
                                </template>
                            </v-combobox>
                            <v-text-field
                                    type="number"
                                    v-model="server.mtu"
                                    label="Définir le MTU global"
                                    hint="Laisser à 0 et laisser wg-quick gérer le MTU"
                            />
                            <v-text-field
                                    type="number"
                                    v-model="server.persistentKeepalive"
                                    label="Keepalive persistant"
                                    hint="Laissez à 0 pour ne pas spécifier un keepalive persistant"
                            />
                        </v-col>
                    </div>
                </v-card>
            </v-col>
        </v-row>
        <v-row>
            <v-col cols="12">
                <v-card dark>
                    <v-list-item>
                        <v-list-item-content>
                            <v-list-item-title class="headline">Interface configuration hooks</v-list-item-title>
                        </v-list-item-content>
                    </v-list-item>
                    <div class="d-flex flex-no-wrap justify-space-between">
                        <v-col cols="12">
                            <v-text-field
                                    v-model="server.preUp"
                                    label="PreUp: extraits de scripts qui seront exécutés par bash avant la mise en place de l'interface"
                            />
                            <v-text-field
                                    v-model="server.postUp"
                                    label="PostUp: extraits de scripts qui seront exécutés par bash après la mise en place de l'interface"
                            />
                            <v-text-field
                                    v-model="server.preDown"
                                    label="PreDown: extraits de scripts qui seront exécutés par bash avant la mise en place de l'interface"
                            />
                            <v-text-field
                                    v-model="server.postDown "
                                    label="PostDown : extraits de scripts qui seront exécutés par bash après la mise en place de l'interface"
                            />
                        </v-col>
                    </div>
                </v-card>
            </v-col>
        </v-row>
        <v-row>
            <v-divider dark/>
            <v-btn
                    class="ma-2"
                    color="success"
                    :href="`${apiBaseUrl}/server/config`"
            >
                Télécharger la configuration du serveur
                <v-icon right dark>mdi-cloud-download-outline</v-icon>
            </v-btn>
            <v-spacer></v-spacer>
            <v-btn
                    class="ma-2"
                    color="warning"
                    @click="updateServer"
            >
                Mise à jour configuration serveur
                <v-icon right dark>mdi-update</v-icon>
            </v-btn>
            <v-divider dark/>
        </v-row>
        <Notification v-bind:notification="notification"/>
    </v-container>
</template>
<script>
  import {API_BASE_URL, ApiService} from "../services/ApiService";
  import Notification from '../components/Notification'

  export default {
    name: 'Server',

    components: {
      Notification
    },

    data: () => ({
      api: null,
      server: null,
      apiBaseUrl: API_BASE_URL,
      notification: {
        show: false,
        color: '',
        text: '',
      },
    }),

    mounted () {
      this.api = new ApiService();
      this.getServer()
    },

    methods: {
      getServer() {
        this.api.get('/server').then((res) => {
          this.server = res;
        }).catch((e) => {
          this.notify('error', e.response.status + ' ' + e.response.statusText);
        });
      },
      updateServer () {
        // convert int values
        this.server.listenPort = parseInt(this.server.listenPort, 10);
        this.server.persistentKeepalive = parseInt(this.server.persistentKeepalive, 10);
        this.server.mtu = parseInt(this.server.mtu, 10);

        // check server addresses
        if (this.server.address.length < 1) {
          this.notify('error', 'Veuillez fournir au moins une adresse CIDR valide pour le serveur');
          return;
        }
        for (let i = 0; i < this.server.address.length; i++){
          if (this.$isCidr(this.server.address[i]) === 0) {
            this.notify('error', `Un CIDR invalide a été détecté, veuillez corriger ${this.server.address[i]} avant de soumettre`);
            return
          }
        }

        // check DNS correct
        for (let i = 0; i < this.server.dns.length; i++){
          if (this.$isCidr(this.server.dns[i] + '/32') === 0) {
            this.notify('error', `IP invalide détectée, veuillez corriger ${this.server.dns[i]} avant de soumettre`);
            return
          }
        }

        this.api.patch('/server', this.server).then((res) => {
          this.notify('success', "Mise à jour du serveur réussie");
          this.server = res;
        }).catch((e) => {
          this.notify('error', e.response.status + ' ' + e.response.statusText);
        });
      },
      notify(color, msg) {
        this.notification.show = true;
        this.notification.color = color;
        this.notification.text = msg;
      }
    }
  };
</script>
