<template>
	<div id="api">
		<h1>API</h1>
		<p>
			API prípojny bod je dostupný na adrese
			<a href="{{ api_endpoint }}">{{ api_endpoint }}</a
			>.
		</p>
		<h2>Zoznam akcii</h2>
		<ul>
			<li v-for="action in help.actions" :key="action.name">
				<a :href="'#' + action.name">{{ action.name }}</a>
			</li>
		</ul>
		<h2>Prehľad parametrov akcií</h2>
		<div v-for="action in help.actions" :key="action.name" class="action">
			<h3 :id="action.name">{{ action.name }}</h3>
			<p>
				{{ action.description }} <br />
				<a :href="api_endpoint + '?action=' + action.name" target="_blank">{{
					api_endpoint + "?action=" + action.name
				}}</a>
			</p>
			<h4>Parametre</h4>
			<p v-if="Object.keys(action.params).length == 0">
				<font-awesome-icon :icon="['fas', 'circle-info']" />
				&nbsp; Ziadne parametre
			</p>
			<ul>
				<li v-for="param in action.params" :key="param_name">
					<strong>{{ param.name }}</strong>
					<span class="param-type">{{ param.type }}</span>
					<span v-if="param.optional" class="param-optional">optional</span>
					<span v-if="param.default != null" class="param-default">{{
						param.default
					}}</span>
					<br />
					<span class="param-doc">{{ param.doc }}</span>
				</li>
			</ul>
			<p>
				<strong>Return</strong>
				<span class="param-type">{{ action.return }}</span>
			</p>
		</div>
	</div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import backend from "../backend";

const api_endpoint = ref(backend.endpont);
const help = ref({ actions: {} });

onMounted(() => {
	loadHelp();
});

function loadHelp() {
	backend.help().then((response) => {
		help.value = response;
	});
}
</script>
