<template>
  <div
    class="l-banner"
    :style="bannerStyle"
  >
    <slot name="banner-prepend">
      <l-icon>
        <component
          :is="iconToUse"
          fill
        />
      </l-icon>
    </slot>
    <slot name="banner-append" />
    <p
      v-if="$slots.default"
      class="banner-text"
    >
      <slot name="default" />
    </p>
  </div>
</template>

<script>
import LIcon from "../atoms/LIcon.vue";
import IconWarningCircle from "../../icons/icon-warning-circle.vue";
import IconInfoCircle from "../../icons/icon-info-circle.vue";
import IconHelp from "../../icons/icon-help.vue";
import IconCheckCircle from "../../icons/icon-check-circle.vue";

export default {
  components: {
    LIcon,
    IconWarningCircle,
    IconInfoCircle,
    IconHelp,
    IconCheckCircle,
  },
  props: {
    padding: {
      type: String,
      default: "2",
      validator: function (value) {
        return ["0", "2", "4", "6", "8"].indexOf(value) !== -1;
      },
    },
    type: {
      type: String,
      default: "white",
      validator: function (value) {
        return (
          [
            "primary",
            "secondary",
            "tertiary",
            "success",
            "warning",
            "danger",
            "neutral",
            "white",
            "black",
            "admin"
          ].indexOf(value) !== -1
        );
      },
    },
    shade: {
      type: String,
      default: "50",
      validator: function (value) {
        return (
          [
            "50",
            "100",
            "200",
            "300",
            "400",
            "500",
            "600",
            "700",
            "800",
            "900",
          ].indexOf(value) !== -1
        );
      },
    },
    shadow: {
      type: String,
      default: "base",
      validator: function (value) {
        return (
          ["none", "sm", "base", "md", "lg", "xl", "2xl"].indexOf(value) !== -1
        );
      },
    },
  },
  computed: {
    bannerBG() {
      if (this.type === "white" || this.type === "black") {
        return `var(--${this.type})`;
      }
      return `var(--${this.type}-${this.shade})`;
    },
    bannerBorder() {
      return `4px solid var(--${this.type}-500)`
    },
    bannerRadius() {
      return `var(--radius-${this.radius})`;
    },
    bannerPadding() {
      return `var(--spacing-${this.padding}) calc(var(--spacing-${this.padding}) * 2)`;
    },
    bannerShadow() {
      return `var(--shadow-${this.shadow})`;
    },
    bannerText() {
      if (this.type === "white") {
        return `var(--neutral-900)`;
      }
      if (this.type === "black") {
        return `var(--white)`;
      }
      if (Number(this.shade) > 300) {
        return `var(--white)`;
      }
      return `var(--${this.type}-600)`;
    },
    bannerTextMeta() {
      if (this.type === "white") {
        return `var(--neutral-600)`;
      }
      if (this.type === "black") {
        return `var(--neutral-200)`;
      }
      if (Number(this.shade) > 300) {
        return `var(--${this.type}-50)`;
      }
      return `var(--${this.type}-600)`;
    },
    bannerStyle() {
      return {
        "--banner-bg": this.bannerBG,
        "--banner-border": this.bannerBorder,
        "--banner-padding": this.bannerPadding,
        "--banner-shadow": this.bannerShadow,
        "--banner-text": this.bannerText,
        "--banner-text-meta": this.bannerTextMeta,
      };
    },
    iconToUse() {
       switch(this.type) {
        case 'warning' || 'danger':
          return IconWarningCircle
        case 'black' || 'secondary' || 'white':
          return IconHelp
        case 'primary' || 'neutral':
          return IconInfoCircle
        case 'success':
          return IconCheckCircle
        default:
          return
      }
    }
  },
}
</script>

<style lang="scss" scoped>
.l-banner {
  display: flex;
  align-items: center;
  background-color: var(--banner-bg);
  padding: var(--banner-padding);
  box-shadow: var(--banner-shadow);
  border-left: var(--banner-border);
  color: var(--banner-text);
  min-width: 0;
  font-size: var(--sizing-sm);
}

.banner-text {
  margin-left: var(--spacing-4);
}
</style>
