const RadiusRadacctModal = {
    name: 'RadiusRadacctModal',
    props: {
        show: Boolean,
        username: String
    },
    template: `
        <tt-dialog :show="show" title="RADIUS Daten" @close="$emit('close')">
          <div class="kv-redesign">
            <div class="kv-row"><span class="kv-label">Status</span>
              <div class="kv-value">
                <div v-if="radacctData"><strong class="chip"
                  :class="radacctData.online ? 'ok' : 'bad'">{{ radacctData.online ? 'Online' : 'Offline' }}</strong>
                </div>
                <div v-else><tt-skeleton width="80px" height="24px" style="margin-left: auto;" /></div>
              </div>
            </div>

            <div class="kv-row"><span class="kv-label">IP</span>
              <div class="kv-value">
                <div v-if="radacctData" class="inline-copy">
                  <code v-if="radacctData.ip">{{ radacctData.ip }}</code>
                  <code v-else>—</code>
                  <tt-copy-button v-if="radacctData.ip" :text="radacctData.ip" />
                </div>
                <div v-else><tt-skeleton width="120px" style="margin-left: auto;" /></div>
              </div>
            </div>

            <div class="kv-row"><span class="kv-label">Username</span>
              <div class="kv-value">
                <div v-if="radacctData" class="inline-copy">
                  <a class="link" target="_blank"
                    :href="'http://radius.xinon.at/edit_user.php?user=' + radacctData.username"
                    data-tooltip="User in Radius öffnen">{{ radacctData.username }}</a>
                  <tt-copy-button :text="radacctData.username" />
                </div>
                <div v-else><tt-skeleton width="150px" style="margin-left: auto;" /></div>
              </div>
            </div>

            <template v-if="radacctData">
              <div class="kv-row"><span class="kv-label">Kundennummer</span><code class="kv-value">{{ radacctData.customerNumber || '—' }}</code></div>
              <div class="kv-row"><span class="kv-label">Kundenname</span><div class="kv-value clamp-2">{{ radacctData.customerName || '—' }}</div></div>
              <div class="kv-row"><span class="kv-label">Info</span><div class="kv-value clamp-3 mono small">{{ radacctData.info || '—' }}</div></div>
              <div class="kv-row"><span class="kv-label">WLAN Password</span><code class="kv-value mono">{{ radacctData.wlanPassword || '—' }}</code></div>
              <div class="kv-row"><span class="kv-label">Bandbreite</span><code class="kv-value">{{ radacctData.actualBandwidth || '—' }}</code></div>
            </template>
            <template v-else>
              <div class="kv-row" v-for="n in 5" :key="n"><span class="kv-label">&nbsp;</span><div class="kv-value"><tt-skeleton style="margin-left: auto;" /></div></div>
            </template>
          </div>
        </tt-dialog>
    `,
    data: () => ({
        radacctData: null
    }),
    watch: {
        show(val) {
            if (val && this.username) {
                this.fetchRadacctData();
            } else {
                this.radacctData = null;
            }
        }
    },
    methods: {
        async fetchRadacctData() {
            this.radacctData = null;
            try {
                const { data } = await axios.get(`${window.TT_CONFIG.BASE_PATH}/Radius/proxyUnsecureHTTPRequestToRadius`, {
                    params: { action2: 'fetchRadacct', username: this.username }
                });
                this.radacctData = data;
            } catch (error) {
                console.error(error);
                this.radacctData = {};
            }
        }
    }
};

if (window.VueApp) {
    window.VueApp.component('RadiusRadacctModal', RadiusRadacctModal);
}