<template>
  <button ref="btn"
          :type="type"
          :disabled="disabled"
          @click="handleClick"
  >
    <slot :busy="busy" :disabled="disabled" />
  </button>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  // import { baseProps } from "./baseProps";

  type ButtonType = 'button' | 'submit' | 'reset'

  interface BaseProps {
    type?: ButtonType
    disabled?: boolean
    busy?: boolean
    arrow: boolean
    to?: any
    keepFocus?: boolean
  }

  const props = withDefaults(defineProps<BaseProps>(), {
    type: "button",
    disabled: false,
    busy: false,
    arrow: false,
    to: undefined,
    keepFocus: false
  });


  // const props = defineProps(baseProps)
  const emit = defineEmits(['click'])

  // Template ref
  const btn = ref(null)

  const focus = () => {
    btn.value.focus()
  }

  const handleClick = function(e: any) {
    if(!props.keepFocus) btn.value.blur()

    if(props.to) {
      // todo: How do we access router in a generic way?
      //$router.push(props.to)
    } else {
      emit('click', e)
    }
  }

  defineExpose({ focus })
</script>
