<template>
  <div
    class="l-notice"
    :class="classes"
    :title="label"
    :style="{
      '--notice-bg': noticeBG,
    }"
    @click="triggerClick"
  >
    <div class="l-notice-header">
      <div class="l-notice-indicator"></div>
      <span v-if="label" class="l-notice-label">{{ label }}</span>
      <div v-if="aside" class="l-notice-aside">
        <span class="l-notice-aside-content">{{ aside }}</span>
        <span class="l-notice-aside-trigger" v-if="clickable">{{
          trigger
        }}</span>
      </div>
    </div>
    <div v-if="content || hasDefaultSlot" class="l-notice-content">
      {{ content }}
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  name: "l-notice",
  props: {
    /**
     * The label of the notice.
     */
    label: {
      type: String,
    },
    /**
     * The aside content of the notice. Can be date, time, etc.
     */
    aside: {
      type: String,
    },
    /**
     * Description/content for the notice.
     */
    content: {
      type: String,
    },
    /**
     * Trigger content, this will be shown on hover, default is "Learn more"
     */
    trigger: {
      type: String,
      default: "Learn More",
    },
    /**
     * Make the notice clickable.
     */
    clickable: {
      type: Boolean,
      default: false,
    },
    /**
     * The type of the notice.
     */
    type: {
      type: String,
      default: "primary",
      validator: function (value) {
        return (
          [
            "primary",
            "secondary",
            "tertiary",
            "success",
            "warning",
            "danger",
            "neutral",
            "admin"
          ].indexOf(value) !== -1
        );
      },
    },
    /**
     * The shade of the type color.
     */
    shade: {
      type: String,
      default: "500",
      validator: function (value) {
        return (
          [
            "50",
            "100",
            "200",
            "300",
            "400",
            "500",
            "600",
            "700",
            "800",
            "900",
          ].indexOf(value) !== -1
        );
      },
    },
    /**
     * The size of the notice.
     */
    size: {
      type: String,
      default: "small",
      validator: function (value) {
        return ["x-small", "small", "medium", "large"].indexOf(value) !== -1;
      },
    },
  },
  computed: {
    classes() {
      return [
        "l-notice--" + this.type,
        "l-notice-size--" + this.size,
        {
          "l-notice--clickable": this.clickable,
        },
      ];
    },
    noticeBG() {
      if (this.type === "white" || this.type === "black") {
        return `var(--${this.type})`;
      }
      return `var(--${this.type}-${this.shade})`;
    },
    hasDefaultSlot() {
      return !!this.$slots.default;
    },
  },
  methods: {
    triggerClick() {
      this.$emit("click");
    },
  },
};
</script>

<style>
.l-notice {
  display: inline-flex;
  flex-direction: column;
  gap: var(--spacing-2);
  padding: var(--spacing-1) var(--spacing-3);
  background-color: var(--white);
  border: 0.5px solid var(--neutral-50);
  color: var(--neutral-700);
  font-size: var(--sizing-sm);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  font-weight: semibold;
  transition: all var(--duration-100) ease-in-out;
  text-decoration: none;
  user-select: none;
  width: 100%;
}
.l-notice--clickable {
  cursor: pointer;
}
.l-notice--clickable:hover {
  box-shadow: var(--shadow-md);
}
.l-notice-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.l-notice-label {
  font-weight: 500;
}
.l-notice-aside {
  color: var(--neutral-300);
  padding-left: var(--spacing-6);
  position: relative;
  font-size: var(--sizing-xs);
}
.l-notice-aside-content {
  opacity: 1;
  transition: opacity var(--duration-300) ease-in-out;
}
.l-notice-aside-trigger {
  opacity: 0;
  transition: opacity var(--duration-300) ease-in-out;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  padding-left: var(--spacing-2);
  margin: auto;
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.9),
    var(--white)
  );
}
.l-notice--clickable:hover .l-notice-aside-content {
  opacity: 0;
}
.l-notice--clickable:hover .l-notice-aside-trigger {
  opacity: 1;
}
.l-notice-indicator {
  width: var(--spacing-0-5);
  height: var(--spacing-4-5);
  border-radius: var(--radius-sm);
  background-color: var(--notice-bg);
  position: absolute;
  left: var(--spacing-neg-3);
  top: 0;
  bottom: 0;
  margin: auto;
}

.l-notice-content {
  color: var(--neutral-300);
  font-size: var(--sizing-xs);
}

/* Sizes */
.l-notice-size--x-small {
  padding: var(--spacing-0) var(--spacing-2);
  font-size: var(--sizing-xs);
}
.l-notice-size--x-small .l-notice-indicator {
  height: var(--spacing-3-5);
  left: var(--spacing-neg-2);
}

.l-notice-size--small {
  font-size: var(--sizing-xs);
}

.l-notice-size--large {
  font-size: var(--sizing-lg);
  padding: var(--spacing-2) var(--spacing-6);
}
.l-notice-size--large .l-notice-indicator {
  left: var(--spacing-neg-6);
  width: var(--spacing-1);
  height: var(--spacing-7);
}
</style>
