<template>
  <button
    class="inline-flex items-center gap-1 text-sm font-medium reset-base rounded-xl w-fit"
    :type="type"
    :class="buttonClasses"
    :disabled="isDisabled || isLoading"
    @click="handleClick"
  >
    <fluent-icon :size="iconSize" :icon="icon" class="flex-shrink-0" />
    <span
      v-if="$slots.default"
      class="text-sm font-medium truncate"
      :class="{ 'text-left rtl:text-right': size !== 'expanded' }"
    >
      <slot />
    </span>
    <fluent-icon :size="iconSize" icon="chevron-right" class="flex-shrink-0" />
  </button>
</template>
<script>
export default {
  props: {
    type: {
      type: String,
      default: 'submit',
    },
    variant: {
      type: String,
      default: '',
    },
    size: {
      type: String,
      default: '',
    },
    icon: {
      type: String,
      default: '',
    },
    emoji: {
      type: String,
      default: '',
    },
    colorScheme: {
      type: String,
      default: 'primary',
    },
    classNames: {
      type: [String, Object],
      default: '',
    },
    isDisabled: {
      type: Boolean,
      default: false,
    },
    isLoading: {
      type: Boolean,
      default: false,
    },
    isExpanded: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    // variantClasses() {
    //   if (this.variant.includes('link')) {
    //     return `clear ${this.variant}`;
    //   }
    //   return this.variant;
    // },
    // hasOnlyIcon() {
    //   const hasEmojiOrIcon = this.emoji || this.icon;
    //   return !this.$slots.default && hasEmojiOrIcon;
    // },
    // hasOnlyIconClasses() {
    //   return this.hasOnlyIcon ? 'button--only-icon' : '';
    // },

    buttonClasses() {
      return [
        this.colorClass,
        this.sizeClass,
        // this.variantClasses,
        // this.hasOnlyIconClasses,
        // this.size,
        // this.colorClass,
        // this.classNames,
        // this.isDisabled ? 'disabled' : '',
        // this.isExpanded ? 'expanded' : '',
      ];
    },
    colorClass() {
      if (this.colorScheme === 'primary') {
        return 'bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-700 focus:ring focus:ring-offset-1 focus:ring-primary-400';
      }
      if (this.colorScheme === 'secondary') {
        return 'bg-ash-100 text-white hover:bg-ash-200 active:bg-ash-200 focus:ring focus:ring-offset-1 focus:ring-ash-400';
      }
      if (this.colorScheme === 'danger') {
        return 'bg-ruby-600 text-white hover:bg-ruby-700 active:bg-ruby-700 focus:ring focus:ring-offset-1 focus:ring-ruby-400';
      }
      return 'bg-primary-500 text-white';
    },
    sizeClass() {
      if (this.size === 'md') {
        return 'px-3 py-2 text-sm';
      }
      return 'px-4 py-2.5 text';
    },
    iconSize() {
      switch (this.size) {
        case 'tiny':
          return 12;
        case 'small':
          return 14;
        case 'medium':
          return 16;
        case 'large':
          return 18;

        default:
          return 16;
      }
    },
    showDarkSpinner() {
      return (
        this.colorScheme === 'secondary' ||
        this.variant === 'clear' ||
        this.variant === 'link' ||
        this.variant === 'hollow'
      );
    },
  },
  methods: {
    handleClick(evt) {
      this.$emit('click', evt);
    },
  },
};
</script>
