<script setup lang="ts">
import { computed } from "vue";
import FontAwesomeIcon from "@/components/FontAwesomeIcon.vue";
import MarkdownRenderer from "@/components/MarkdownRenderer.vue";

const props = defineProps({
  parameter: {
    type: Object,
    required: true,
    validator(value: Record<string, never>) {
      return ["boolean", "array", "number", "string"].includes(value["type"]);
    },
  },
  required: Boolean,
  parameterName: {
    type: String,
    required: true,
  },
});

const randomIDSuffix = Math.random().toString(16).substr(2, 8);

const helpText = computed<string | undefined>(
  () => props.parameter["help_text"]
);
const parameterType = computed<string>(() => props.parameter["type"]);
const icon = computed<string | undefined>(() => props.parameter["fa_icon"]);
const description = computed<string>(() => props.parameter["description"]);
const defaultValue = computed<string | undefined>(() =>
  props.parameter["default"]?.toString()
);
const enumValues = computed<string[] | undefined>(() =>
  props.parameter["enum"]?.map((val: string) => val.toString())
);
const hidden = computed<boolean>(() => props.parameter["hidden"] ?? false);
const parameterPattern = computed<string | undefined>(
  () => props.parameter["pattern"]
);

const showRightColum = computed<boolean>(
  () =>
    helpText.value != undefined ||
    props.required ||
    defaultValue.value != undefined
);
</script>

<template>
  <div
    class="row border-top border-bottom border-secondary align-items-start py-2"
    v-if="!hidden"
  >
    <div class="fs-6 col-3">
      <font-awesome-icon :icon="icon" v-if="icon" class="me-2" />
      <code class="bg-dark p-1" :id="props.parameterName"
        >--{{ props.parameterName }}</code
      >
      <br />
      <span>type: '{{ parameterType }}'</span>
    </div>
    <div
      :class="{ 'col-7': showRightColum, 'col-9': !showRightColum }"
      class="flex-fill"
    >
      <markdown-renderer :markdown="description" />
    </div>
    <div
      class="col-auto d-flex flex-column align-items-end flex-fill"
      v-if="showRightColum"
    >
      <button
        class="btn btn-outline-info btn-sm my-1"
        type="button"
        data-bs-toggle="collapse"
        :data-bs-target="'#helpCollapse' + randomIDSuffix"
        aria-expanded="false"
        aria-controls="collapseExample"
        v-if="helpText"
      >
        <font-awesome-icon icon="fa-solid fa-circle-info" />
        Help
      </button>
      <div v-if="enumValues" class="dropdown w-fit my-1">
        <a
          class="bg-dark rounded-1 p-1 dropdown-toggle text-reset text-decoration-none"
          href="#"
          role="button"
          data-bs-toggle="dropdown"
          aria-expanded="false"
        >
          Options:
          <span v-if="defaultValue"
            ><code>{{ defaultValue }}</code> (default)</span
          >
        </a>
        <ul class="dropdown-menu dropdown-menu-dark" v-if="enumValues">
          <li v-for="val in enumValues" :key="val" class="px-2 w-100">
            {{ val }} <span v-if="val === defaultValue">(default)</span>
          </li>
        </ul>
      </div>
      <span v-else-if="defaultValue" class="bg-dark rounded-1 py-0 px-1 my-1"
        >default: <code>{{ defaultValue }}</code></span
      >

      <span
        v-if="props.required"
        class="bg-warning rounded-1 px-1 py-0 text-white"
        >required</span
      >
    </div>
    <div
      class="collapse p-2 pb-0 bg-dark m-2 flex-shrink-1"
      :id="'helpCollapse' + randomIDSuffix"
      v-if="helpText"
    >
      <markdown-renderer class="helpTextCode" :markdown="helpText" />
      <span v-if="parameterPattern" class="mb-2"
        >Pattern: <code>{{ parameterPattern }}</code></span
      >
    </div>
  </div>
</template>

<style scoped>
code {
  color: var(--bs-code-color) !important;
}

li:hover {
  background: var(--bs-secondary);
}
a:hover {
  filter: brightness(1.2);
}
</style>