<template>
  <q-dialog
    persistent
    v-model="show_dialog"
    @before-hide="resetData"
    @keydown="
      (evt) => {
        if (evt.keyCode == 27) {
          show_dialog = false;
        }
      }
    "
  >
    <q-card class="overflow-hidden" style="max-width: 45vw">
      <q-form @submit="onSubmit">
        <q-card-section class="q-ma-none q-pa-sm">
          <div class="row">
            <div class="col-auto text-h6">
              {{ $t("ip address") }}
            </div>
            <q-space />
            <div>
              <q-btn
                flat
                round
                icon="close"
                :disable="loading"
                color="red"
                v-close-popup
              >
                <q-tooltip>
                  {{ $t("close") }}
                </q-tooltip>
              </q-btn>
            </div>
          </div>
        </q-card-section>

        <q-card-section
          class="scroll q-pa-xs q-ma-none"
          style="width: 45vw; max-height: 55vh"
        >
          <q-list>
            <q-item>
              <q-item-section avatar class="header_label">
                {{ $t("ip address") }}
              </q-item-section>
              <q-item-section>
                <q-input
                  v-model="ip_address"
                  autofocus
                  :rules="[
                    (val) =>
                      (val && val.length > 0) || $t('Please type something'),
                    (val) =>
                      isIpAddress(val) || $t('Please input vaild ip address'),
                    (val) => checkFilterListIp(val),
                  ]"
                  lazy-rules
                />
              </q-item-section>
            </q-item>
            <q-item>
              <q-item-section avatar class="header_label">
                {{ $t("gateway") }}
              </q-item-section>
              <q-item-section>
                <q-input
                  v-model="gateway"
                  :rules="[
                    (val) =>
                      (val && val.length > 0) || $t('Please type something'),
                    (val) =>
                      isIpAddress(val) || $t('Please input vaild ip address'),
                  ]"
                  lazy-rules
                />
              </q-item-section>
            </q-item>
            <q-item>
              <q-item-section avatar class="header_label">
                {{ $t("netmask") }}
              </q-item-section>
              <q-item-section>
                <q-input
                  v-model="netmask"
                  :rules="[
                    (val) =>
                      (val && val.length > 0) || $t('Please type something'),
                    (val) =>
                      isIpAddress(val) || $t('Please input vaild ip address'),
                  ]"
                  lazy-rules
                />
              </q-item-section>
            </q-item>
            <q-item v-if="$props.showDns">
              <q-item-section avatar class="header_label">
                {{ $t("dns server") }}1
              </q-item-section>
              <q-item-section>
                <q-input
                  v-model="dns1"
                  :rules="[
                    (val) =>
                      isIpAddress(val) ||
                      val.length == 0 ||
                      $t('Please input vaild ip address'),
                  ]"
                  lazy-rules
                />
              </q-item-section>
            </q-item>
            <q-item v-if="$props.showDns">
              <q-item-section avatar class="header_label">
                {{ $t("dns server") }}2
              </q-item-section>
              <q-item-section>
                <q-input
                  v-model="dns2"
                  :rules="[
                    (val) =>
                      isIpAddress(val) ||
                      val.length == 0 ||
                      $t('Please input vaild ip address'),
                  ]"
                  lazy-rules
                />
              </q-item-section>
            </q-item>
          </q-list>
        </q-card-section>

        <q-separator />

        <q-card-actions align="right">
          <q-btn
            flat
            :label="$t('Cancel')"
            no-caps
            color="primary"
            v-close-popup
          />
          <q-btn
            ref="accept"
            flat
            no-caps
            :label="$t('Accept')"
            type="submit"
            color="primary"
          />
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<style scoped>
.header_label {
  width: 20%;
}
</style>

<script lang="ts">
import { defineComponent, ref, Ref, reactive } from "vue";
import { useStore } from "src/store";
import { useQuasar, copyToClipboard, uid } from "quasar";
import { useI18n } from "vue-i18n";
import GlobalData from "src/common/GlobalData";
import { AdvancedIpAddressEntity } from "src/entities/AdvancedIpAddressEntity";

export default defineComponent({
  name: "ComponentSystenSettingAdvancedNetworkDialog",
  components: {},
  props: {
    showDns: {
      type: Boolean,
      default: true,
    },
  },
  setup() {
    let $store = useStore();
    let $q = useQuasar();
    let $t = useI18n();

    let show_dialog = ref(false);

    const status = ref("add");

    const ip_address = ref("192.168.1.1");
    const gateway = ref("192.168.1.1");
    const netmask = ref("255.255.255.0");
    const dns1 = ref("");
    const dns2 = ref("");

    let _resolove: any = null;
    let ip_filter_list: any[] = [];

    return {
      show_dialog,
      status,
      ip_address,
      gateway,
      netmask,
      dns1,
      dns2,
      loga(a: any) {
        console.log(a);
      },
      async showDialogAsync(
        _status: string,
        data: AdvancedIpAddressEntity,
        _ip_filter_list: any[]
      ) {
        if (_resolove) {
          _resolove();
          _resolove = null;
        }
        return new Promise((resolove) => {
          _resolove = resolove;
          status.value = _status;
          if (data) {
            ip_address.value = data.ip_address || "192.168.1.1";
            gateway.value = data.gateway || "192.168.1.1";
            netmask.value = data.netmask || "255.255.255.0";
            dns1.value = data.dns1 || "";
            dns2.value = data.dns2 || "";
          }
          ip_filter_list = _ip_filter_list;
          if (Array.isArray(ip_filter_list) && data && data.ip_address) {
            ip_filter_list = ip_filter_list.filter(
              (element) => element != data.ip_address
            );
          }
          show_dialog.value = true;
        });
      },
      resetData() {
        if (_resolove) {
          _resolove();
          _resolove = null;
        }
        status.value = "add";
        ip_address.value = "192.168.1.1";
        gateway.value = "192.168.1.1";
        netmask.value = "255.255.255.0";
        dns1.value = "";
        dns2.value = "";
      },

      async onSubmit() {
        try {
          if (_resolove) {
            try {
              const data = new AdvancedIpAddressEntity();
              data.ip_address = ip_address.value;
              data.gateway = gateway.value;
              data.netmask = netmask.value;
              data.dns1 = dns1.value;
              data.dns2 = dns2.value;
              _resolove(data);
            } catch {
              _resolove(null);
            }
          }
          show_dialog.value = false;
        } catch {}
      },
      isIpAddress(str: string) {
        return (
          str == "localhost" ||
          /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
            str
          )
        );
      },
      checkFilterListIp(str: string) {
        if (Array.isArray(ip_filter_list)) {
          const index = ip_filter_list.findIndex((e) => e == str);
          if (index != -1) {
            return (
              $t.t("ip address") +
              " " +
              str +
              " " +
              $t.t("already existed") +
              "!"
            );
          }
        }
        return true;
      },
    };
  },
});
</script>
