<template>
  <div
    :class="{'vc-radio-group--inline': inline}"
    class="vc-radio-group-wrapper"
  >
    <VcRadio
      v-for="(item, i) in radios"
      :key="i"
      v-model="model"
      :value="getValue(item)"
      :label="getLabel(item)"
      :group-name="radioGroupName"
      :radio-label-class="radioLabelClass"
      :data-test="`radio-group-${dataTestName}`"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import VcRadio from '@/components/VcRadio/VcRadio.vue'
import { VcRadioKeysInterface } from './VcRadioGroup.types'
import { VcRadioTypes } from '@/components/VcRadio/VcRadio.types'

export default defineComponent({
  name: 'VcRadioGroup',
  components: {
    VcRadio
  },
  model: {
    prop: 'value'
  },
  props: {
    value: {
      type: String as PropType<VcRadioTypes>,
      default: '',
      description: 'Radio value'
    },
    keys: {
      type: Object as PropType<VcRadioKeysInterface>,
      default: () => {
        return {}
      },
      description: 'Keys for radios props'
    },
    radios: {
      type: Array,
      default: () => [],
      description: 'Radio data'
    },
    groupName: {
      type: String,
      default: '',
      description: 'Radio Group name'
    },
    radioClass: {
      type: String,
      default: '',
      description: 'Radio class'
    },
    radioLabelClass: {
      type: String,
      default: '',
      description: 'Radio label class'
    },
    dataTestName: {
      type: String,
      default: 'default'
    },
    onInput: {
      type: Function,
      default: null,
      description: 'Temporary @input method'
    },
    inline: {
      type: Boolean,
      default: false
    }
  },
  emits: ['input', 'update:value'],
  data () {
    return {
      model: '' as VcRadioTypes,
      defaultKeys: {
        label: 'label',
        value: 'value'
      }
    }
  },
  computed: {
    radioGroupName () {
      let name = Math.random()
        .toString(16)
        .slice(2)
      if (this.groupName) {
        name = this.groupName
      }
      return name
    },
    dataKeys () {
      return {
        ...this.defaultKeys,
        ...this.keys
      }
    },
    labelKey () {
      return this.dataKeys.label
    },
    valueKey () {
      return this.dataKeys.value
    }
  },
  watch: {
    value: {
      handler (newV: VcRadioTypes) {
        this.model = newV
      },
      immediate: true
    },
    model (newV: VcRadioTypes, oldV: VcRadioTypes) {
      if (newV === this.value || newV === oldV || !newV) {
        return
      }
      this.update(newV)
    }
  },
  methods: {
    getValue (data: Record<string, unknown>) {
      const key = this.valueKey
      return Object.prototype.toString.call(data) === '[object Object]' && key ? data[key] : data
    },
    getLabel (data: Record<string, unknown>) {
      const key = this.labelKey
      return Object.prototype.toString.call(data) === '[object Object]' && key ? data[key] : data
    },
    update (value: VcRadioTypes) {
      if (this.$attrs && this.$attrs.onInput) {
        this.$emit('input', value)
      } else if (this.onInput && typeof this.onInput === 'function') {
        this.onInput(value)
      } else {
        this.$emit('update:value', value)
      }
    }
  }
})
</script>

<style lang="scss" scoped>
.vc-radio-group {
  &-wrapper {
    @apply w-full;
  }
  &--inline {
    @apply flex flex-wrap gap-4;
  }
}
</style>
