<template>
  <slot name="input">
    <template v-if="listData !== undefined">
      <div :class="['form-item', half ? 'form-item-half' : '', elclass || '']">
        <span class="form-item-title" v-if="title !== undefined && title !== ''">
          {{ title }}
          <i v-if="required" class="form-item-alert">*</i>
        </span>
        <label
          :class="['label-radio', disabled ? 'disabled' : '']"
          v-for="(item, i) in listData">
          <input
            type="radio"
            :name="'radio' + rnd"
            v-model="localValue"
            :value="item[listVal!]"
            :disabled="disabled"
            @click="OnClick"
            @change="OnChange"
            :class="[
              invalidText !== undefined && invalidText !== '' ? 'invalid' : '',
              iclass || ''
            ]" />
          <slot name="radiotext" :itemData="item">
            <slot :name="'radiotext' + i">
              <span>{{ item[listText!] }}</span>
            </slot>
          </slot>
        </label>
      </div>
    </template>
    <template v-else>
      <label :class="['label-radio', disabled ? 'disabled' : '']">
        <input
          type="radio"
          :name="group"
          v-model="localValue"
          :value="val"
          :disabled="disabled"
          @click="OnClick"
          @change="OnChange"
          :class="[
            invalidText !== undefined && invalidText !== '' ? 'invalid' : '',
            iclass || ''
          ]" />
        <slot name="radiotext">
          <span>{{ label }}</span>
        </slot>
      </label>
    </template>

    <span
      class="form-item-alert"
      v-if="InvalidMessages.length > 0 && InvalidMessages !== ''">
      {{ InvalidMessages }}
    </span>
    <span
      class="form-item-description"
      v-if="description !== undefined && description !== ''">
      {{ description }}
    </span>
  </slot>
</template>
<script setup lang="ts">
  import { ref, reactive, computed, watch } from 'vue'

  interface RadioObj {
    [key: string]: any
    text: string
  }

  export interface Props {
    listData?: RadioObj[]
    listText?: string
    listVal?: string
    val?: number | string | boolean
    group?: string
    label?: string
    disabled?: boolean
    modelValue: string | number | boolean | null
    half?: boolean
    title?: string
    invalidText?: string
    description?: string
    required?: boolean
    iclass?: string
    elclass?: string
  }
  const props = withDefaults(defineProps<Props>(), {
    disabled: false,
    half: false,
    required: false
  })

  const emit = defineEmits(['update:modelValue', 'change', 'click'])
  const localValue = ref<string | number | boolean | null>(props.modelValue)

  const rnd = ref<number>(Number(Math.floor(Math.random() * 1000000000)))
  const InvalidMessageText = reactive<Record<string, any>>({})
  const InvalidMessages = computed<string>(() => {
    let text = ''
    Object.keys(InvalidMessageText).forEach((k: string, i: number) => {
      text += InvalidMessageText[k] + ', '
    })
    return text
  })

  const OnChange = (e: Event) => {
    emit('update:modelValue', localValue.value)
    emit('change', e)
  }

  const OnClick = (e: Event) => {
    emit('click', e)
  }

  watch(
    () => props.invalidText,
    () => {
      if (props.invalidText !== undefined && props.invalidText !== '') {
        Object.assign(InvalidMessageText, {})
        InvalidMessageText.invalid = props.invalidText
      } else {
        delete InvalidMessageText.invalid
      }
    }
  )
</script>
