<script>
import { defineComponent } from "vue";
import DashboardLayout from "../src/lib-components/DashboardLayout.vue";
import KeycloakDashboardHeader from "../src/lib-components/KeycloakDashboardHeader.vue";
import KeycloakDashboardSidebar from "../src/lib-components/KeycloakDashboardSidebar.vue";
import SidebarButton from "../src/lib-components/SidebarButton.vue";
import SidebarHeading from "../src/lib-components/SidebarHeading.vue";

export default defineComponent({
  components: {
    DashboardLayout,
    KeycloakDashboardHeader,
    KeycloakDashboardSidebar,
    SidebarHeading,
    SidebarButton,
  },
  data: function() {
    return {
      text: "",
      results: [],
      error: {
        text: "mehr text",
        variant: "danger",
        dismissible: true,
      },
    };
  },
  methods: {
    lookupTaxonomy: function(input, result) {
      window
        .fetch(
          "https://www.ebi.ac.uk/ena/taxonomy/rest/suggest-for-search/" + input
        )
        .then((r) => r.json())
        .then((j) => {
          result(
            j.map((x) => ({ value: x.scientificName, label: x.scientificName }))
          );
        });
    },

    doSomething: function(evt) {
      console.log(evt);
    },
  },
  name: "ServeDev",
});
</script>

<template>
  <div id="app">
    <dashboard-layout>
      <template v-slot:header>
        <keycloak-dashboard-header
          appName="Test"
          :noKeycloak="true"
        ></keycloak-dashboard-header>
      </template>
      <template v-slot:sidebar>
        <keycloak-dashboard-sidebar
          :noKeycloak="true"
        ></keycloak-dashboard-sidebar>
      </template>
      <template v-slot:default>
        <panel-with-sidebox sideboxWidth="200px">
          <template v-slot:default>
            <h1>Component examples</h1>

            <row-entry label="Something">Test</row-entry>
            <notification modelValue="text" />
            <notification
              :modelValue="{ text: 'mehr text', variant: 'danger' }"
            />
            <notification v-model="error" />
            <form-group-text-box
              v-model="text"
              label="Input data"
              :maxChars="12"
            />
            <form-group-text-field
              v-model="text"
              label="Input data"
              :maxChars="12"
            />
            <info-panel heading="Heading" title="Panel-Title">
              Some content
            </info-panel>
            <info-panel heading="Heading" title="Panel-Title" type="secondary">
              Some content
            </info-panel>
            <duration-input />
            <currency-input />
            <remote-typeahead
              placeholder="Taxon search"
              :suggestionLookup="lookupTaxonomy"
              v-model="text"
            />
          </template>
          <template v-slot:sidebar>
            <sidebar-heading label="Title" />
            <sidebar-list>
              <sidebar-button
                icon="file"
                :action="doSomething"
                label="sometext"
              />
            </sidebar-list>
          </template>
        </panel-with-sidebox>
      </template>
    </dashboard-layout>
    <div></div>
  </div>
</template>