<script setup>

import { ref, onMounted, watch } from 'vue';
import { Switch } from 'pankow';
import Section from  '../components/Section.vue';
import Ipv4Config from '../components/Ipv4Config.vue';
import Ipv6Config from '../components/Ipv6Config.vue';
import Firewall from '../components/Firewall.vue';
import NetworkModel from  '../models/NetworkModel.js';

const networkModel = NetworkModel.create();

const dynDnsIsEnabled = ref(false);
watch(dynDnsIsEnabled, async (newValue) => {
  const [error] = await networkModel.setDynDnsConfig(newValue);
  if (error) return console.error(error);
});

onMounted(async () => {
  const [error, result] = await networkModel.getDynDnsConfig();
  if (error) return console.error(error);

  dynDnsIsEnabled.value = result.enabled;
});

</script>

<template>
  <div class="content">
    <h1>{{ $t('network.title') }}</h1>

    <Ipv4Config />
    <Ipv6Config />
    <Firewall />

    <Section :title="$t('network.dyndns.title')">
      <p>{{ $t('network.dyndns.description') }}</p>
      <!-- TODO<p class="text-danger" ng-show="dyndnsConfigure.error"><br/>{{ dyndnsConfigure.error }}</p> -->

      <Switch v-model="dynDnsIsEnabled" :label="$t(dynDnsIsEnabled ? 'main.statusEnabled' : 'main.statusDisabled')" />
    </Section>
  </div>
</template>
