<template>
  <div
    :class="parentWrapperClass"
    @mouseover="$emit('handleMouseOver')"
    @mouseleave="$emit('handleMouseLeave')"
  >
    <slot></slot>
    <button
      v-if="type == 'tertiary'"
      :class="customClasses"
      :id="id"
      :disabled="disabled"
      class="child-button inline-flex h-9 cursor-pointer items-center gap-2 rounded-md px-3 py-2 text-sm text-indigo-600 hover:bg-indigo-100 hover:text-indigo-800 focus:outline-none focus:ring-2 focus:ring-indigo-200 focus:ring-offset-2"
      @click.prevent="$emit('action')"
    >
      <c-icon
        v-if="icon"
        :type="icon.type"
        :class="[icon.class || iconClasses]"
        :cursorType="computedIconCursorType"
        :name="icon.name"
        :viewBox="icon.viewBox"
      ></c-icon
      >{{ label }}
      <slot name="customButtonContent"></slot>
    </button>
    <button
      v-else-if="type != 'tertiary' && label.length && !reverseIcon"
      :type="type"
      :id="id"
      :style="computedStyles"
      :class="[classes]"
      :disabled="disabled"
      class="child-button inline-flex h-9 items-center gap-2 rounded-md px-3 py-2 text-sm font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2"
      @click.prevent="$emit('action')"
    >
      <c-icon v-if="isLoading" class="h-4 w-4" name="loader"></c-icon>
      <c-icon
        v-if="icon && !isLoading"
        :type="icon.type"
        :class="[icon.class || iconClasses]"
        :cursorType="computedIconCursorType"
        :name="icon.name"
        :viewBox="icon.viewBox"
      ></c-icon>
      {{ label }}
      <slot name="customButtonContent"></slot>
    </button>
    <button
      v-else-if="type != 'tertiary' && label.length && reverseIcon"
      :type="type"
      :id="id"
      :style="computedStyles"
      :class="[classes]"
      :disabled="disabled"
      class="child-button inline-flex h-9 items-center gap-2 rounded-md px-4 py-2 text-sm font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2"
      @click.prevent="$emit('action')"
    >
      {{ label }}
      <c-icon v-if="isLoading" class="h-4 w-4" name="loader"></c-icon>
      <c-icon
        v-if="icon && !isLoading"
        :type="icon.type"
        :class="[icon.class || iconClasses]"
        :cursorType="computedIconCursorType"
        :name="icon.name"
        :viewBox="icon.viewBox"
      ></c-icon>
      <slot name="customButtonContent"></slot>
    </button>
    <button
      v-else-if="type != 'tertiary' && label.length == 0"
      :type="type"
      :id="id"
      :class="[classes]"
      :disabled="disabled"
      class="child-button inline-flex h-9 items-center gap-2 rounded-md px-3 py-2 text-sm font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2"
      @click.prevent="$emit('action')"
    >
      <c-icon v-if="isLoading" class="h-4 w-4" name="loader"></c-icon>
      <c-icon
        v-if="icon && !isLoading"
        :type="icon.type"
        :class="[icon.class || iconClasses]"
        :cursorType="computedIconCursorType"
        :name="icon.name"
        :viewBox="icon.viewBox"
      ></c-icon>
      <slot name="customButtonContent"></slot>
    </button>
  </div>
</template>

<script>
import CIcon from "../CIcon/CIcon.vue";
import { COLOR_CONFIG } from "../../colorConfig";
export default {
  name: "CButton",
  components: { CIcon },
  props: {
    label: {
      type: String,
    },
    icon: {
      type: Object,
    },
    type: {
      type: String,
      default: "primary",
      required: true,
    },
    isLoading: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
    },
    action: {
      type: Function,
    },
    customClasses: {
      type: String,
      default: "",
    },
    iconCustomClasses: {
      type: String,
      default: "",
    },
    id: {
      type: String,
    },
    iconCursorType: {
      type: String,
      default: "cursor-pointer",
    },
    reverseIcon: {
      type: Boolean,
      default: false,
    },
    parentWrapperClass: {
      type: String,
      default: "",
    },
    preferredColor: {
      type: String,
      default: "indigo",
    },
  },

  computed: {
    classes() {
      let classes = {
        "text-gray-700 border bg-white border-gray-300 hover:bg-gray-50 focus:ring-indigo-600":
          this.type == "white",
        "text-indigo-700 bg-indigo-100 border border-indigo-100 hover:bg-indigo-200 focus:ring-indigo-500":
          this.type == "secondary",
        "text-white primary-button-classes": this.type == "primary",
        "text-white hover:bg-red-800 bg-red-700 border border-red-700 focus:ring-red-600":
          this.type == "danger",
        "text-white hover:bg-green-800 bg-green-700 border border-green-700 focus:ring-green-600":
          this.type == "success",
        "text-green-800 border border-solid border-gray-300 bg-white hover:bg-gray-50 focus:ring-indigo-600":
          this.type == "secondary-success",
        "text-gray-700 hover:bg-gray-200 bg-gray-100 border border-gray-100":
          this.type == "secondary-gray",
        "bg-red-100 border border-red-100 text-red-800 hover:bg-red-200 focus:ring-red-200":
          this.type == "light-red",
        "bg-green-100 border border-green-100 text-green-800 hover:bg-green-200 focus:ring-green-200":
          this.type == "light-green",
        "bg-gray-800 border border-gray-800 text-white hover:bg-gray-700 focus:ring-gray-500":
          this.type == "dark-blue",
        "cursor-default pointer-events-none": this.isLoading,
        "text-white hover:bg-yellow-800 bg-yellow-700 border border-yello-800 focus:ring-yellow-600":
          this.type == "yellow",
        "text-gray-700 group border bg-white border-gray-300 hover:bg-red-50 hover:text-red-700 focus:ring-indigo-600":
          this.type == "delete-button",
        "text-gray-700 bg-white shadow-none hover:bg-gray-100 focus:ring-0":
          this.type == "white-plain",
      };
      classes[this.customClasses] = true;
      return classes;
    },
    iconClasses() {
      let iconClasses = {
        "h-5 w-5": this.iconCustomClasses ? false : true,
        "text-indigo-400": this.type == "secondary",
        "text-white":
          this.type == "success" ||
          this.type == "primary" ||
          this.type == "danger" ||
          this.type == "dark-blue",
        "text-gray-400": this.type == "secondary-gray" || this.type == "white" || this.type == "white-plain",
        "text-red-400": this.type == "light-red",
        "text-gray-400 group-hover:text-red-700": this.type == "delete-button",
      };
      iconClasses[this.iconCustomClasses] = true;
      return iconClasses;
    },
    computedStyles() {
      const colors = COLOR_CONFIG[this.preferredColor] || COLOR_CONFIG.indigo;
      return {
        "--primary-background-color": colors.shade700,
        "--primary-border-color": colors.shade700,
        "--primary-background-color-hover": colors.shade800,
        "--primary-ring-color": colors.shade600,
      };
    },
    computedIconCursorType() {
      return this.disabled ? "cursor-not-allowed" : this.iconCursorType;
    },
  },

  methods: {
    onClick() {
      this.$emit("onClick");
    },
  },
};
</script>
<style>
.child-button.pointer-events-none {
  @apply cursor-not-allowed;
}
.child-button:disabled {
  @apply cursor-not-allowed opacity-50;
}
.primary-button-classes {
  background-color: var(--primary-background-color);
  border-color: var(--primary-border-color);
}
.primary-button-classes:hover {
  background-color: var(--primary-background-color-hover);
}
.primary-button-classes:focus {
  outline: none;
  box-shadow: 0 0 0 2px white, 0 0 0 4px var(--primary-ring-color) !important;
}
</style>
