<template>
  <div class="ais-addon" :class="variant">
    <slot name="custom"
          :icon="icon"
          :button="button"
          :label="label"
          :hasIcon="hasIcon"
    >
      <div class="flex gap-2 justify-items-center" :class="slotClasses">
        <AisIcon v-if="hasIcon && !button" :icon="icon" />
        <AisIconButton
            v-if="hasIcon && button"
            :icon="icon"
            :label="label"
            @click="handleClick"
        />
        <span v-if="$slots.default" @click="handleClick">
          <slot name="default" />
        </span>
        <AisIcon v-if="hasIconRight && !button" :icon="iconRight" />
        <AisIconButton
            v-if="hasIconRight && button"
            :icon="iconRight"
            :label="label"
            @click="handleClick"
        />
      </div>
    </slot>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import AisIcon from '@c/icon/AisIcon.vue'
import AisIconButton from '@c/icon-button/AisIconButton.vue'
import { iconProps, iconPropDef } from "@c/icon/ais-icons";
import {expectedValues} from "@/util/prop-validators";

const props = defineProps({
  ...iconProps,

  button: { type: Boolean, required: false, default: false },

  label: { type: String, required: false, default: 'Icon button'},

  iconRight: { ...iconPropDef },

  // todo: Should we be using alternate styles for variants?
  // todo: This shows differences in borders more, but is probably more in spirit of an addon.
  variant: {
    type: String,
    default: 'default',
    validator: expectedValues(
        'default', 'primary', 'secondary',
        'info', 'success', 'warning', 'danger'
    )
  },
})

const hasIcon = computed(() => !!props.icon)
const hasIconRight = computed(() => !!props.iconRight)

const emit = defineEmits(['click'])

const handleClick = function(e) {
  emit('click', e)
}

const slotClasses = computed(() => {
  const classes = ['whitespace-nowrap']
  if(props.button) classes.push('cursor-pointer', 'scale-100', 'active:scale-95', 'origin-center')
  return classes
})
</script>
