<template>
  <BaseButton
      :type="type"
      class="bttn"
      ref="btn"
      :disabled="disabled"
      :class="buttonClasses"
      :keepFocus="keepFocus"
      @click="handleClick"
  >
    <AisIcon v-if="hasIcon" :icon="icon" class="" />

    <span v-if="!iconOnly" class="bttn-content">
      <slot name="default" />
    </span>

    <AisIcon v-if="hasIconRight" :icon="iconRight" class="" />
  </BaseButton>
</template>

<script setup lang="ts">
  import { computed, inject, ref } from 'vue'
  // import { baseProps } from "./baseProps"
  // import { inputProps, fontLookup } from "@/util/input-props";
  // import { fontLookup } from "@/util/input-props";
  // import { customizationProps} from "@/components/button/custom-props";
  // import { iconProps, iconPropDef } from "@c/icon/ais-icons";
  import BaseButton from './BaseButton.vue'
  import AisIcon from '@/components/icon/AisIcon.vue'
  import {getRoundedClass} from "@/util/class-util";
  import {useSize} from "@/composables/useInjections";
  import {ButtonType, Variants, CoreIcons, Font, Size, fontLookup} from "../../util/BaseType";


  interface Props {
    type?: ButtonType
    disabled?: boolean
    busy?: boolean
    arrow?: boolean
    to?: any
    keepFocus?: boolean
    variant?: Variants
    alternate?: boolean
    font?: Font
    size?: Size
    hover?: boolean
    fast?: boolean
    press?: boolean
    block?: boolean
    rounded?: boolean | string
    icon?: CoreIcons
    iconRight?: CoreIcons
    iconOnly?: boolean
  }


  const props = withDefaults(defineProps<Props>(), {
    type: "button",
    disabled: false,
    busy: false,
    arrow: false,
    to: undefined,
    keepFocus: false,
    variant: "primary",
    alternate: false,
    font: "caps",
    size: undefined,
    hover: false,
    fast: false,
    press: false,
    block: false,
    rounded: false,
    icon: undefined,
    iconRight: undefined,
    iconOnly: false
  });



  // const props = defineProps({
  //   ...baseProps,
  //   ...inputProps,
  //   ...customizationProps,
  //   ...iconProps,
  //
  //   iconRight: { ...iconPropDef },
  //   iconOnly: { type: Boolean, required: false, default: false },
  // })

  const emit = defineEmits(['click'])
  const groupVariant = inject('groupVariant', null)
  //const groupSize = inject('groupSize', null)
  //const groupSize = useSize(props)

  const buttonVariant = computed(() => groupVariant && groupVariant.value ? groupVariant.value : props.variant )

  //const buttonSize = computed(() => groupSize && groupSize.value ? groupSize.value : props.size )
  const buttonSize = useSize(props, 'md')

  const fontClass = computed(() => fontLookup(props.font))

  const optionClasses = computed(() => {
    let classes = []

    if(props.alternate) classes.push('alternate')
    if(props.block) classes.push('w-full')
    if(props.rounded) classes.push(getRoundedClass(props.rounded))
    if(props.disabled) return classes

    let options = ['hover', 'outline', 'fast', 'press', 'loading']
    options.forEach(option => {
      if(props[option]) classes.push(option)
    })

    return classes
  })

  const iconOnlyClass = computed(() => props.iconOnly ? 'icon-only' : '')

  const buttonClasses = computed(() => [buttonVariant.value, buttonSize.value, fontClass.value, ...optionClasses.value, iconOnlyClass.value ] )

  let icon = computed(() => props.busy ? 'busy' : props.icon)
  const hasIcon = computed(() => !!icon.value)
  const hasIconRight = computed(() => !!props.iconRight || props.arrow)

  const iconRight = computed(() => props.arrow ? 'arrow' : props.iconRight)

  const btn = ref(null)
  const focus = () => btn.value.focus()
  defineExpose({ focus })

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

</script>
