<template lang="pug">
  .container.flex.flex-col.gap-y-2
    base-input-container(
      v-if="radioButtonsLabel",
      :label="radioButtonsLabel"
    )
    q-option-group(
      class="q-gutter-md",
      :size="size",
      :options="items"
      type="radio",
      :id="item?.id",
      :value="item?.value",
      v-model="value",
      :inline="inline"
    )
    span {{item?.label}}
</template>

<script>
import BaseInputContainer from "@/components/base/BaseInputContainer";

export default {
  name: "BaseRadioButtonsGroup",
  components: { BaseInputContainer },
  emits: ["update:modelValue"],
  props: {
    modelValue: String,
    radioButtonsLabel: String,
    items: {
      type: Array,
      default: () => [],
    },
    directionColumn: Boolean,
    columnGap: String,
    rowGap: String,
    size: {
      type: String,
      default: "sm",
    },
    inline: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    value: {
      get() {
        return this.modelValue;
      },
      set(value) {
        this.$emit("update:modelValue", value);
      },
    },
    radioGroupClasses() {
      if (this.directionColumn) {
        return this.columnGap
          ? {
              "flex-col": true,
              [this.columnGap]: true,
            }
          : {
              "flex-col": true,
              "gap-y-1": true,
            };
      }
      if (this.rowGap)
        return {
          [this.rowGap]: true,
        };
      return {
        "gap-x-4": true,
      };
    },
  },
};
</script>

<style lang="sass" scoped>
.q-gutter-x-md, .q-gutter-md
  margin-left: -24px
</style>
