<template>
  <button
    class="vc-button-icon"
    :disabled="disabled"
    :class="classes"
    @click="handleClick"
  >
    <span class="vc-button--content">
      <i
        v-if="icon"
        :class="icon"
        class="content-icon"
      />
    </span>
  </button>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { ButtonIconType, ButtonColor } from './VcButton.types'

const DEFAULT_TYPE = 'default'
const DEFAULT_COLOR = 'primary'

const CLASS_DISABLED = 'vc-button-icon--disabled'
const CLASS_FOR_TYPE = 'vc-button-icon-type--'
const CLASS_FOR_COLOR = 'vc-button-icon-color--'

export default defineComponent({
  name: 'VcButtonIcon',
  props: {
    type: {
      type: String as PropType<ButtonIconType>,
      default: DEFAULT_TYPE
    },
    color: {
      type: String as PropType<ButtonColor>,
      default: DEFAULT_COLOR
    },
    icon: {
      type: String,
      default: 'vc-icon-settings'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    dataTestName: {
      type: String,
      default: 'vc-button'
    }
  },
  emits: ['click'],
  computed: {
    classes () {
      const typeClass = CLASS_FOR_TYPE + this.type
      const colorClass = CLASS_FOR_COLOR + this.color
      return [
        typeClass,
        colorClass,
        {
          [CLASS_DISABLED]: this.disabled
        }
      ]
    }
  },
  methods: {
    handleClick (evt: MouseEvent): void {
      if (!this.disabled) {
        this.$emit('click', evt)
      }
    }
  }
})
</script>

<style lang="scss" scoped>
$transition: all .28s ease;

@mixin colorActions($color) {
  &-color--#{$color} {
    @apply text-#{$color}-actions;
    .vc-button--content, .content-icon {
      @apply text-#{$color}-actions;
    }
    &:not(.vc-button--disabled) {
      &:hover, &:focus {
        .vc-button--content, .content-icon {
          @apply text-#{$color}-actions--focus;
        }
      }
      &:active {
        .vc-button--content, .content-icon {
          @apply text-#{$color}-actions--pressed;
        }
      }
      &:not(.vc-button-icon--disabled):not(.vc-button-icon-type--hoverless) {
        &:hover, &:focus {
          @apply bg-#{$color}-actions-bg--focus;
        }
        &:active {
          @apply bg-#{$color}-actions-bg--pressed;
        }
      }
    }
  }
}

.vc-button-icon {
  @apply
  relative
  inline-flex
  items-center
  cursor-pointer
  bg-transparent
  text-center
  outline-none
  text-current
  rounded-sm;
  transition: $transition;
  height: max-content;

  .vc-button--content {
    @apply flex text-center items-center flex-grow flex-shrink-0 whitespace-nowrap;
    transition: $transition;
  }
  .vc-button--content, .content-icon {
    @apply text-lg text-current;
    line-height: 1;
  }

  &-type--default, &-type--hoverless {
    @apply p-1;
  }

  &-type--outline {
    @apply border-2 p-2.5 text-current border-current;
    .vc-button--content, .content-icon {
      @apply text-base;
    }
  }

  @include colorActions(primary);
  @include colorActions(secondary);
  @include colorActions(destructive);

  &--disabled, &:disabled {
    @apply opacity-50 cursor-not-allowed;
  }
}

</style>
