<template>
  <div
    class="input-radio-caption"
    :class="{ disabled, error: errors.length > 0 }"
    @click="inputValue = value"
  >
    <BmsInputRadio
      v-model="inputValue"
      :value="value"
      :name="name"
      :label="label"
      :disabled="disabled"
      :errors="errors"
      :required="required"
    >
      <template #label>
        <slot name="label">{{ label }}</slot>
      </template>
    </BmsInputRadio>
    <span
      class="group-caption"
      v-for="message in concatErrors()"
      :key="message.label"
    >
      <BmsCaption :caption="message" />
    </span>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import BmsInputRadio from './BmsInputRadio.vue';
import { Caption } from '@/models/caption.model';
import BmsCaption from '@/components/feedback/BmsCaption.vue';
import { convertStringToCaption } from '@/helpers';

export interface Props {
  modelValue: any;
  value: any;
  name: string;
  label?: string;
  disabled?: boolean;
  required?: boolean;
  errors?: (string | Caption)[];
  captions?: (string | Caption)[];
}

const props = withDefaults(defineProps<Props>(), {
  required: false,
  label: '',
  disabled: false,
  errors: () => [],
  captions: () => [],
});

const $emits = defineEmits<{
  (e: 'update:modelValue', value: any): void;
}>();

const inputValue = computed({
  get() {
    return props.modelValue;
  },
  set(val: any) {
    $emits('update:modelValue', val);
  },
});

const concatErrors = (): Caption[] => {
  return props.errors
    .map((e) => convertStringToCaption(e))
    .concat(props.captions.map((c) => convertStringToCaption(c)));
};
</script>

<style lang="scss" scoped>
.input-radio-caption {
  --input-radio-caption-border-color: var(--bms-grey-25);
  --input-radio-caption-background-color: transparent;

  display: flex;
  flex-direction: column;
  width: fit-content;
  padding: 8px;
  gap: 8px;
  border: 1px solid var(--input-radio-caption-border-color);
  border-radius: 4px;
  background-color: var(--input-radio-caption-background-color);

  .group-caption {
    cursor: default;
    margin-left: 20px;
    font-size: 14px;
  }

  &:hover {
    --input-radio-caption-border-color: var(--bms-main-100);
  }

  &.disabled {
    --input-radio-caption-border-color: var(--bms-grey-50);
    --input-radio-caption-background-color: var(--bms-grey-25);
  }

  &.error {
    --input-radio-caption-border-color: var(--bms-red-100);
    --input-radio-caption-background-color: var(--bms-red-25);
  }
}
</style>
