<template>
  <div class="l-list" :style="listStyle">
    <slot />
  </div>
</template>

<script>
export default {
  name: "l-list",
  props: {
    /**
     * The gap size between items.
     */
    gap: {
      type: String,
      default: "4",
      validator: function (value) {
        return ["0", "2", "4", "6", "8"].indexOf(value) !== -1;
      },
    },
    /**
     * The type color of the list.
     */
    type: {
      type: String,
      default: "white",
      validator: function (value) {
        return (
          [
            "primary",
            "secondary",
            "tertiary",
            "success",
            "warning",
            "danger",
            "neutral",
            "white",
            "black",
            "admin"
          ].indexOf(value) !== -1
        );
      },
    },
  },
  computed: {
    listGap() {
      return `var(--spacing-${this.gap})`;
    },
    listBG() {
      if (this.type === "white" || this.type === "black") {
        return `var(--${this.type})`;
      }
      return `var(--${this.type}-50)`;
    },
    listBGHover() {
      if (this.type === "white") {
        return `var(--neutral-50)`;
      }
      if (this.type === "black") {
        return `var(--neutral-800)`;
      }
      return `var(--${this.type}-100)`;
    },
    listText() {
      if (this.type === "white") {
        return `var(--neutral-900)`;
      }
      if (this.type === "black") {
        return `var(--white)`;
      }
      return `var(--${this.type}-900)`;
    },
    listTextMeta() {
      if (this.type === "white") {
        return `var(--neutral-600)`;
      }
      if (this.type === "black") {
        return `var(--neutral-200)`;
      }
      return `var(--${this.type}-600)`;
    },
    listHighlight() {
      if (this.type === "white" || this.type === "black") {
        return `var(--primary-500)`;
      }
      return `var(--${this.type}-500)`;
    },
    listStyle() {
      return {
        "--list-gap": this.listGap,
        "--list-bg": this.listBG,
        "--list-bg-hover": this.listBGHover,
        "--list-text": this.listText,
        "--list-text-meta": this.listTextMeta,
        "--list-highlight": this.listHighlight,
      };
    },
  },
};
</script>
<style>
.l-list {
  display: flex;
  flex-direction: column;
  gap: var(--list-gap);
  background-color: var(--list-bg);
  overflow: hidden;
  border-radius: var(--radius-lg);
}
</style>
