<script setup lang="ts">
import { computed } from 'vue'
import { useAttrsWithDefaults } from '../../../composables/useAttrsWithDefaults'
import FdsIcon from '../../FdsIcon/FdsIcon.vue'
import FdsSpinner from '../../FdsSpinner/FdsSpinner.vue'
import type { FdsButtonTertiaryProps } from './types'

defineOptions({
  inheritAttrs: false,
})

const props = withDefaults(defineProps<FdsButtonTertiaryProps>(), {
  loading: false,
  block: false,
  state: undefined,
  icon: undefined,
  iconPos: 'left',
  size: 'md',
  iconSize: 24,
  textSelection: false,
  as: 'button',
  type: 'button',
  dataTestid: undefined,
})

const emit = defineEmits<{
  (e: 'click', ev: MouseEvent): void
}>()

const { disabled, href, attrs } = useAttrsWithDefaults(props)

const rootClasses = computed(() => ['inline-block transition-opacity duration-200', props.block && 'block w-full'])

const externalClass = computed(() => attrs.class)

const elBase =
  'fds-button-tertiary box-border appearance-none inline-flex items-center justify-center select-none w-full min-h-0 min-w-12 m-0 rounded-full text-center align-middle whitespace-nowrap no-underline shadow-none transition-[box-shadow,border-color,background-color] duration-200 font-main font-bold text-base leading-5 tracking-normal focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-blue-500'

const sizeClasses: Record<string, string> = {
  sm: 'py-1 px-3',
  md: 'text-base py-1 px-4 leading-6',
}

const variantClasses =
  'bg-white border border-blue-500 text-blue-600 hover:bg-blue_t-100 hover:border-blue-500 hover:text-blue-600 active:bg-blue_t-200 active:border-blue-500 active:text-blue-600'

const blockElClasses = computed(() => props.block && 'w-full justify-center')

const iconOrderClasses = computed(() => (props.icon && props.iconPos === 'right' ? 'order-2' : ''))

const buttonClasses = computed(() => [
  elBase,
  sizeClasses[props.size || 'md'],
  variantClasses,
  blockElClasses.value,
  props.textSelection && 'select-text',
  (props.icon || props.text) && 'gap-2',
  props.loading && 'bg-blue_t-200!',
  disabled.value ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',
])

const iconFillClass = 'fill-blue-500'

const onClick = (ev: MouseEvent) => {
  if (disabled.value || props.loading) {
    ev.preventDefault()
    return
  }
  emit('click', ev)
}

const componentTag = computed(() => {
  if (disabled.value || props.loading) return 'button'
  return props.as
})

const linkAttrs = computed(() => {
  if (componentTag.value === 'a') return { href: href.value }
  if (componentTag.value === 'router-link') return { to: href.value }
  return {}
})

const componentAttrs = computed(() => {
  const { class: _class, ...restAttrs } = attrs
  return {
    ...linkAttrs.value,
    ...restAttrs,
  }
})
</script>

<template>
  <div :class="[rootClasses, externalClass]" :aria-disabled="disabled ? 'true' : undefined">
    <component
      :is="componentTag"
      v-bind="componentAttrs"
      :type="componentTag === 'button' ? props.type : undefined"
      :disabled="componentTag === 'button' ? disabled : undefined"
      :data-testid="dataTestid"
      :class="buttonClasses"
      @click="onClick"
    >
      <template v-if="loading">
        <FdsSpinner :size="size === 'sm' ? '18px' : '24px'" color="inherit" />
      </template>
      <template v-else-if="icon">
        <span :class="iconOrderClasses" aria-hidden="true">
          <FdsIcon :class="iconFillClass" :name="icon" :size="iconSize" />
        </span>
      </template>
      <span v-if="text">{{ text }}</span>
    </component>
  </div>
</template>
