<template>
  <span>
    <BaseButton
        class="ibttn"
        :class="classes"
        :type="type"
        :to="to"
        :keepFocus="keepFocus"
        @click="handleClick"
        :title="label"
    >
      <AisIcon :icon="icon" :class="iconClasses"/>
      <span class="sr-only">{{ label }}</span>
    </BaseButton>
  </span>
</template>

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

 const props = defineProps({
   ...baseProps,
   icon: { ...iconPropDef, required: true },

   label: { type: String, required: true },

   size: {
     type: String, required: false, default: 'md',
     validator: expectedValues('sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl')
   },

   shadow: {
     type: String, required: false, default: 'none',
     validator: expectedValues('sm', 'md', 'lg', 'xl', '2xl', '3xl', 'none')
   },

   hover: { type: Boolean, required: false, default: false },
   press:  { type: Boolean, required: false, default: false },
 })

 const emit = defineEmits(['click'])

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

 const sizeMap = {
   'sm': ['text-sm', 'w-5', 'h-5'],
   'md': ['text-base', 'w-6', 'h-6'],
   'lg': ['text-lg', 'w-7', 'h-7'],
   'xl': ['text-xl', 'w-8', 'h-8'],
   '2xl': ['text-2xl', 'w-9', 'h-9'],
   '3xl': ['text-3xl', 'w-10', 'h-10'],
   '4xl': ['text-4xl', 'w-12', 'h-12'],
 }

 const shadowMap = {
   'sm': ['drop-shadow-sm'],
   'md': ['drop-shadow'],
   'lg': ['drop-shadow-md'],
   'xl': ['drop-shadow-lg'],
   '2xl': ['drop-shadow-xl'],
   '3xl': ['drop-shadow-2xl'],
   'none': ['drop-shadow-none'],
 }

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

   if(props.hover) results.push('opacity-30', 'hover:opacity-100', 'focus:opacity-100')
   if(props.press) results.push('scale-100', 'active:scale-95', 'origin-center')

   let sizeKey = sizeMap.hasOwnProperty(props.size) ? props.size : 'md'
   let sizeClasses = sizeMap[sizeKey]
   results.push(...sizeClasses)

   return results
 })

 const iconClasses = computed(() => {
   let results = []

   let shadowKey = shadowMap.hasOwnProperty(props.shadow) ? props.shadow : 'none'
   let shadowClasses = shadowMap[shadowKey]
   results.push(...shadowClasses)

   return results
 })
</script>
