<template>
  <nav
    class="l-nav-side"
    :style="{
      '--l-nav-side-bg': navBG,
      '--l-nav-side-text': navText,
      '--l-nav-side-highlight': highlightText,
    }"
  >
    <!-- <span v-if="title" class="l-nav-side-header">{{ title }}</span> -->
    <div class="l-nav-side-sections">
      <slot />
    </div>
  </nav>
</template>

<script>
export default {
  props: {
    /**
     * Nav Side title
     */
    // title: {
    //   type: String,
    // },
    /**
     * Background applies to icon background and interhighlight elements
     */
    background: {
      type: String,
      default: "neutral",
      validator: function (value) {
        return (
          [
            "primary",
            "secondary",
            "tertiary",
            "success",
            "warning",
            "danger",
            "neutral",
            "white",
            "black",
          ].indexOf(value) !== -1
        );
      },
    },
    /**
     * Background shade
     */
    backgroundShade: {
      type: String,
      default: "50",
      validator: function (value) {
        return (
          [
            "50",
            "100",
            "200",
            "300",
            "400",
            "500",
            "600",
            "700",
            "800",
            "900",
          ].indexOf(value) !== -1
        );
      },
    },
    /**
     * Color applies to all text content and icons
     */
    color: {
      type: String,
      default: "neutral",
      validator: function (value) {
        return (
          [
            "primary",
            "secondary",
            "tertiary",
            "success",
            "warning",
            "danger",
            "neutral",
            "white",
            "black",
          ].indexOf(value) !== -1
        );
      },
    },
    /**
     * Color shade
     */
    colorShade: {
      type: String,
      default: "700",
      validator: function (value) {
        return (
          [
            "50",
            "100",
            "200",
            "300",
            "400",
            "500",
            "600",
            "700",
            "800",
            "900",
          ].indexOf(value) !== -1
        );
      },
    },
    /**
     * highlight colour applies to highlight elements
     */
    highlightColor: {
      type: String,
      default: "primary",
      validator: function (value) {
        return (
          [
            "primary",
            "secondary",
            "tertiary",
            "success",
            "warning",
            "danger",
            "neutral",
            "white",
            "black",
          ].indexOf(value) !== -1
        );
      },
    },
    /**
     * highlight colour shade
     */
    highlightShade: {
      type: String,
      default: "500",
      validator: function (value) {
        return (
          [
            "50",
            "100",
            "200",
            "300",
            "400",
            "500",
            "600",
            "700",
            "800",
            "900",
          ].indexOf(value) !== -1
        );
      },
    },
  },
  computed: {
    navBG() {
      if (this.background === "white" || this.background === "black") {
        return `var(--${this.background})`;
      }
      return `var(--${this.background}-${this.backgroundShade})`;
    },
    navText() {
      if (this.color === "white" || this.color === "black") {
        return `var(--${this.color})`;
      }
      return `var(--${this.color}-${this.colorShade})`;
    },
    highlightText() {
      if (this.highlightColor === "white" || this.highlightColor === "black") {
        return `var(--${this.highlightColor})`;
      }
      return `var(--${this.highlightColor}-${this.highlightShade})`;
    },
  },
};
</script>

<style>
.l-nav-side {
  display: flex;
  flex-direction: column;
  color: var(--l-nav-side-text);
  font-weight: 200;

}
.l-nav-side-header {
  text-transform: uppercase;
  font-size: var(--sizing-sm);
  margin-bottom: var(--spacing-3);
  opacity: 0.7;
  letter-spacing: 0.05em;
}
.l-nav-side-sections {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-10);
}
</style>
