<script setup>
import Modal from "./Modal.vue";
import {peerStore} from "@/stores/peers";
import {interfaceStore} from "@/stores/interfaces";
import {computed} from "vue";

const peers = peerStore()
const interfaces = interfaceStore()

const props = defineProps({
  peerId: String,
  visible: Boolean,
})

const emit = defineEmits(['close'])

function close() {
  emit('close')
}

const selectedPeer = computed(() => {
  return peers.Find(props.peerId)
})

const selectedInterface = computed(() => {
  let i = interfaces.GetSelected;

  if (!i) {
    i = { // dummy interface to avoid 'undefined' exceptions
      Identifier: "none",
      Mode: "server"
    }
  }

  return i
})

const title = computed(() => {
  if (selectedPeer.value) {
    return "Peer: " + selectedPeer.value.Name
  }
  return ""
})

</script>

<template>
  <Modal :title="title" :visible="visible" @close="close">
    <template #default>
      <div class="accordion">
        <div class="accordion-item">
          <h2 class="accordion-header">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
              Peer Information
            </button>
          </h2>
          <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample" style="">
            <div class="accordion-body">
              <div class="row">
                <div class="col-md-8">
                  <h4>Details</h4>
                  <ul>
                    <li>Firstname: Some</li>
                    <li>Lastname: Username</li>
                    <li>Phone: 123456789</li>
                    <li>Mail: x@y.de</li>
                  </ul>
                  <h4>Traffic</h4>
                  <p><i class="fas fa-long-arrow-alt-down"></i> 1.5 MB / <i class="fas fa-long-arrow-alt-up"></i> 3.9 MB</p>
                </div>
                <div class="col-md-4">
                  <img class="config-qr-img" src="https://hexdocs.pm/qr_code/docs/qrcode.svg">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="selectedInterface.Mode==='server'" class="accordion-item">
          <h2 class="accordion-header" id="headingTwo">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
              Peer Configuration
            </button>
          </h2>
          <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample" style="">
            <div class="accordion-body">
              <pre>
# AUTOGENERATED FILE - PROVIDED BY WIREGUARD PORTAL
# WireGuard configuration: Some username (Home)
# -WGP- PublicKey: xyz123

[Interface]

# Core settings
PrivateKey = abcd2131234
Address = 10.6.6.3/32, fd9f:6666::3/128

# Misc. settings (optional)
DNS = 10.10.1.20, fd9f:6666::10:6:6:1
MTU = 1380

[Peer]
PublicKey = oidjsfgsp9oih23
Endpoint = vpn.server.de:51820
AllowedIPs = 10.6.6.0/24, 10.10.0.0/16, 10.12.0.0/16, fd9f:6666::/64
PresharedKey = +1FPHPdsfjkln23
PersistentKeepalive = 16
              </pre>
            </div>
          </div>
        </div>

      </div>
    </template>
    <template #footer>
      <div class="flex-fill text-start">
        <button type="button" class="btn btn-primary me-1">Download</button>
        <button type="button" class="btn btn-primary me-1">Email</button>
      </div>
      <button @click.prevent="close" type="button" class="btn btn-secondary">Close</button>


    </template>
  </Modal>
</template>

<style>
.config-qr-img {
  max-width: 100%;
}
</style>
