<template>
  <n-input
    :rules="rules"
    :value="value"
    :label="label"
    :required="required"
    :helper-text="helperText"
  >
    <template #default>
      <div :class="['n-flex n-gap-2 n-flex-wrap', { 'n-flex-column': column }]">
        <slot />
      </div>
    </template>
  </n-input>
</template>

<script>
import { defineComponent, computed } from "vue";
import NInput from "../NInput/n-input.vue";

export default defineComponent({
  name: "NRadioGroup",
  components: {
    NInput,
  },
  provide() {
    return {
      groupSelectedValue: computed(() => this.value),
      onForceUpdate: this.updateParent,
    };
  },
  props: {
    rules: {
      type: Array,
      default: () => [],
    },
    value: {
      type: [String, Number],
      default: "",
    },
    label: {
      type: String,
      default: "",
    },
    helperText: {
      type: String,
      default: "",
    },
    column: {
      type: Boolean,
      default: false,
    },
    required: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    updateParent(value) {
      const providedValue = value || this.value;

      this.$emit("input", providedValue);
    },
  },
});
</script>

<style scoped>
@import url("./n-radio-group.css");
</style>
