<template>
  <div class="flex items-center"
       :class="[disabled ? 'opacity-20' : '']"
  >
    <input
      :id="name"
      :name="name"
      type="radio"
      class="hidden"
      :checked="model === value"
      :disabled="disabled"
      @change="update"
    >
    <label
      :for="name"
      class="flex items-center text-deepblue-900 dark:text-gray-200 cursor-pointer w-full whitespace-nowrap"
      :class="[textSizeOptions[size]]"
    >
      <span v-if="side==='left'" class="select-none w-full"><slot /></span>
      <component :is="currentComponent" class="text-deepblue-900 dark:text-gray-200 w-full" :class="[sizeOptions[size]]"/>
      <span v-if="side==='right'" class="select-none w-full"><slot /></span>
    </label>
  </div>
</template>

<script setup lang="ts">
import RadioCheck from "#adata-ui/icons/radio/radio-check.vue";
import RadioEmpty from "#adata-ui/icons/radio/radio-empty.vue";

defineOptions({name: 'ARadioButton'})


interface Props {
  size?: 'lg' | 'sm',
  name?: string
  disabled?: boolean
  side?:'right' | 'left'
  value: string | number | boolean | null | undefined
  permanent?: boolean
}
const props = withDefaults(defineProps<Props>(), {
  size: 'sm',
  name: 'check',
  value: null,
  side: 'left',
  disabled: false,
  permanent: false,
})

const emit = defineEmits(['radioChanged'])
const model = defineModel<string | number | boolean | null | undefined>()

const currentComponent = computed(() => {
  if (model.value ===props.value ) {
    return  RadioCheck
  } else {
    return RadioEmpty
  }
})

function update() {
  if(props.disabled) return

  if(props.value == model.value && !props.permanent) {
    model.value = undefined
  }else{
    model.value = props.value
  }
  emit("radioChanged", model.value)

}

const sizeOptions = {
  lg: 'min-w-6 min-h-6 max-w-6 max-h-6',
  sm: 'min-w-4 min-h-4 max-w-4 max-h-4'
}
const textSizeOptions = {
  lg: 'text-sm gap-2',
  sm: 'text-xs gap-2'
}


</script>

<style scoped>

</style>
