<template>
  <div
    class="l-sidebar"
    :style="{
      '--l-sidebar-bg': sidebarBG,
      '--l-sidebar-border': sidebarBorder,
      '--l-sidebar-text': sidebarText,
    }"
  >
    <div
      v-if="hasLogoSlot"
      class="l-sidebar-logo"
    >
      <slot name="logo" />
    </div>
    <div class="l-sidebar-content">
      <slot />
    </div>
    <div
      v-if="hasFooterSlot"
      class="l-sidebar-footer"
    >
      <slot name="footer" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    /**
     * Background applies to sidebar container
     */
    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: "500",
      validator: function (value) {
        return (
          [
            "50",
            "100",
            "200",
            "300",
            "400",
            "500",
            "600",
            "700",
            "800",
            "900",
          ].indexOf(value) !== -1
        );
      },
    },
    /**
     * Color applies to all content
     */
    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: "800",
      validator: function (value) {
        return (
          [
            "50",
            "100",
            "200",
            "300",
            "400",
            "500",
            "600",
            "700",
            "800",
            "900",
          ].indexOf(value) !== -1
        );
      },
    },
  },
  computed: {
    hasLogoSlot() {
      return !!this.$slots.logo;
    },
    hasFooterSlot() {
      return !!this.$slots.footer;
    },
    sidebarBG() {
      if (this.background === "white" || this.background === "black") {
        return `var(--${this.background})`;
      }
      return `var(--${this.background}-${this.backgroundShade})`;
    },
    sidebarBorder() {
      if (this.background === "white" || this.background === "black") {
        if (this.background === "white") {
          return `var(--neutral-50)`;
        }
        if (this.background === "black") {
          return `var(--neutral-800)`;
        }
      } else {
        if (this.backgroundShade == "50") {
          return `var(--${this.background}-100)`;
        } else if (Number(this.backgroundShade) < 700) {
          return `var(--${this.background}-${
            Number(this.backgroundShade) + 100
          })`;
        } else {
          return `var(--${this.background}-${
            Number(this.backgroundShade) - 100
          })`;
        }
      }
      return null;
    },
    sidebarText() {
      if (this.color === "white" || this.color === "black") {
        return `var(--${this.color})`;
      }
      return `var(--${this.color}-${this.colorShade})`;
    },
  }
};
</script>

<style>
.l-sidebar {
  background-color: var(--l-sidebar-bg);
  color: var(--l-sidebar-text);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  z-index: var(--layer-10);
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
}
.l-sidebar-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: var(--spacing-4);
  max-height: var(--spacing-20);
  position: sticky;
  top: 0;
  z-index: var(--layer-2);
  background-color: var(--neutral-700);
  border-radius: 0 var(--radius-xl) 0 0;
}
.l-sidebar-logo img {
  max-height: 100%;
}
.l-sidebar-content {
  position: relative;
  padding-left: var(--spacing-2-5);
  padding-top: var(--spacing-4);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  flex-grow: 1;
}
.l-sidebar-footer {
  position: sticky;
  bottom: 0;
  z-index: var(--layer-2);
  padding: var(--spacing-2-5) var(--spacing-2);
  background-color: var(--neutral-700);
  border-radius: 0 0 var(--radius-xl) 0;
}

@media screen and (min-height: 768px) {
  .l-sidebar-logo {
    margin-bottom: var(--spacing-2);
  }
  .l-sidebar-content {
    padding-top: var(--spacing-4);
    gap: var(--spacing-8);
  }
}
</style>
