<template>
  <l-button
    class="l-cta-link"
    text
    no-padding
    :type="type"
    :shade="shade"
    :size="size"
    :to="to"
    :href="href"
    :disabled="disabled"
    :style="{
      '--link-hover': linkHover,
      '--link-icon-direction': iconDirection,
    }"
    @click="onClick"
  >
    <slot />
    <l-icon
      v-if="hasIconSlot"
      :size="iconSize"
    >
      <slot name="icon" />
    </l-icon>
  </l-button>
</template>

<script>
import LButton from "../atoms/LButton.vue";
import LIcon from "../atoms/LIcon.vue";

export default {
  name: "LCtaLink",
  components: { LButton, LIcon },
  props: {
    /**
     * The type of the link.
     */
    type: {
      type: String,
      default: "primary",
      validator: function (value) {
        return (
          [
            "primary",
            "secondary",
            "tertiary",
            "success",
            "warning",
            "danger",
            "neutral",
            "white",
            "black",
            "admin"
          ].indexOf(value) !== -1
        );
      },
    },
    /**
     * The shade of the type color.
     */
    shade: {
      type: [String, Number],
      default: "500",
      validator: function (value) {
        return (
          [
            "50",
            "100",
            "200",
            "300",
            "400",
            "500",
            "600",
            "700",
            "800",
            "900",
            50,
            100,
            200,
            300,
            400,
            500,
            600,
            700,
            800,
            900,
          ].indexOf(value) !== -1
        );
      },
    },
    /**
     * The size of the link.
     */
    size: {
      type: String,
      default: "tiny",
      validator: function (value) {
        return ["tiny", "small", "medium", "large"].indexOf(value) !== -1;
      },
    },
    /**
     * The color of the link when it gets hovered.
     */
    hoverColor: {
      type: String,
      default: "",
      validator: function (value) {
        return (
          [
            "",
            "primary",
            "secondary",
            "tertiary",
            "success",
            "warning",
            "danger",
            "neutral",
            "white",
            "black",
          ].indexOf(value) !== -1
        );
      },
    },
    hoverShade: {
      type: [String, Number],
      default: "",
      validator: function (value) {
        return (
          [
            "",
            "50",
            "100",
            "200",
            "300",
            "400",
            "500",
            "600",
            "700",
            "800",
            "900",
            50,
            100,
            200,
            300,
            400,
            500,
            600,
            700,
            800,
            900,
          ].indexOf(value) !== -1
        );
      },
    },
    /**
     * Specify whether the icon should sit on the left or right.
     */
    iconPosition: {
      type: String,
      default: "right",
      validator: function (value) {
        return ["left", "right"].indexOf(value) !== -1;
      },
    },
    /**
     * href - link will act as a native anchor element
     */
    href: {
      type: String,
    },
    /**
     * to - link will act as a nuxt-link
     */
    to: {
      type: String,
    },
    /**
     * Disable link and click event
     */
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    linkHover() {
      if (this.hoverColor === "" && this.hoverShade === "") {
        return `var(--${this.type}-${this.shade})`;
      } else if (this.hoverShade === "") {
        return `var(--${this.hoverColor}-500)`;
      } else {
        return `var(--${this.hoverColor}-${this.hoverShade})`;
      }
    },
    hasIconSlot() {
      return !!this.$slots.icon;
    },
    iconSize() {
      if (this.size === "tiny") {
        return 2;
      } else if (this.size === "small") {
        return 2;
      } else if (this.size === "large") {
        return 4;
      } else {
        return 3;
      }
    },
    iconDirection() {
      return this.iconPosition === "right" ? "" : "row-reverse";
    },
  },
  methods: {
    onClick() {
      if (!this.disabled) {
        this.$emit("click");
      }
    },
  },
};
</script>

<style scoped>
.l-cta-link {
  font-weight: revert;
  background-color: transparent;
  border: 0;
  flex-direction: var(--link-icon-direction);
}

.l-cta-link:hover {
  background-color: transparent;
  border: 0;
  color: var(--link-hover);
}

.l-cta-link:focus {
  outline: 0;
}
</style>
