<template>
  <label
      class="ais-label"
      :class="[...classes]"
  >
    <BaseRadio
      v-bind="modifiedProps"
      v-model="model"
      :name="name"
      :disabled="isDisabled"
    />
    <span class="flex gap-1.5 items-center">
      <AisIcon v-if="$props.icon" :icon="$props.icon" />
      <span>
        <slot />
      </span>
    </span>
  </label>
</template>

<script setup>
    import { computed, inject } from 'vue'
    import BaseRadio from '@/components/radio/BaseRadio.vue'
    import AisIcon from '@/components/icon/AisIcon.vue'
    import {radioProps} from "@/components/radio/radio";
    import {iconProps} from "@c/icon/ais-icons";
    import {expectedValues} from "@/util/prop-validators";
    import {CONTROL_NAME, CONTROL_SIZE, CONTROL_DISABLED, CONTROL_MODEL, CONTROL_PARENT_UPDATE} from "@/util/controls";
    import {useInjectedProp, useSize} from "@/composables/useInjections";
    import { pick } from "@/util/util"

    const props = defineProps({
      ...radioProps,
      ...iconProps,

      size: {
        type: String, required: false, default: undefined,
        validator: expectedValues('sm', 'md', 'lg')
      },
    })

    const emit = defineEmits(['update:modelValue'])
    const modelValueRef = inject(CONTROL_MODEL, computed(() => props.modelValue))
    const updateParent = inject(CONTROL_PARENT_UPDATE, (val) => val)
    const model = computed({
      get() { return modelValueRef.value },

      set(newValue) {
        emit('update:modelValue', newValue)
        updateParent(newValue)
      }
    })

    const name = useInjectedProp(CONTROL_NAME, props, 'name')
    const size = useSize(props, 'md')

    const isButtons = inject('isButtons', null)
    const buttonVariant = inject('buttonVariant', null)
    const buttonFont = inject('buttonFont', null)

    const injectedDisabled = useInjectedProp(CONTROL_DISABLED, props, 'disabled')
    const isDisabled = computed(() => injectedDisabled.value || props.disabled)

    const sizeValues = {
      'sm': ['text-base'],
      'md': ['text-lg'],
      'lg': ['text-xl'],
    }

    const sizeClasses = computed(() => sizeValues[size.value] || [])

    const buttonClasses = computed(() => {
      const classes = ['bttn', size.value]
      if(isButtons && isButtons.value) {
        classes.push(buttonVariant && buttonVariant.value ? buttonVariant.value : '')
        classes.push(buttonFont && buttonFont.value ? buttonFont.value : 'caps')
        classes.push(pick(model.value) === pick(props.value) ? 'active' : '')
      }
      return classes
    })

    const classes = computed(() => {
      let classes = [...sizeClasses.value]

      if(isButtons && isButtons.value)
        classes.push(...buttonClasses.value)
      else
        classes.push('inline-flex', 'gap-2.5', 'items-center')

      if(isDisabled.value) classes.push('opacity-60', 'cursor-not-allowed')

      return classes
    })

    /**
     * We have to make sure the size prop isn't passed to
     * BaseRadio as it will become an illegal value on the
     * underlying DOM element
     * todo: is this true for radio like checkbox?
     */
    const modifiedProps = computed(() => {
      let mProps = { ...props }
      delete mProps.size
      return mProps
    })

</script>
