<template>
  <div class="input-radio" :class="{ disabled, error: errors.length > 0 }">
    <label>
      <input
        type="radio"
        v-model="inputValue"
        :value="value"
        :name="name"
        :disabled="disabled"
        :required="required"
      />
      <span v-if="hasLabel" class="input-radio-info">
        <slot name="label">{{ label }}</slot>
      </span>
    </label>
  </div>
</template>

<script lang="ts" setup>
import { computed, useSlots } from 'vue';
import { Caption } from '@/models/caption.model';

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

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

const slots = useSlots();

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

const hasLabel = computed(() => slots.label || props.label);

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

<style lang="scss" scoped>
.input-radio {
  --input-radio-default-color: var(--bms-grey-100);
  --input-radio-default-color-checked: var(--bms-main-100);

  width: fit-content;

  label {
    display: flex;
    gap: 4px;
  }

  &.error {
    --input-radio-default-color: var(--bms-danger-color);
    --input-radio-default-color-checked: var(--bms-danger-color);
  }

  &.disabled {
    --input-radio-default-color: var(--bms-grey-50);
    --input-radio-default-color-checked: var(--bms-grey-50);
    pointer-events: none;
    input-radio-info {
      color: var(--bms-grey-50);
    }
  }

  &-info {
    line-height: 16px;
    cursor: default;
  }
}
input[type='radio'] {
  appearance: none;
  margin: 0;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  border: 1px solid var(--input-radio-default-color);
  display: grid;
  place-content: center;

  &::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    background-color: var(--input-radio-default-color-checked);
  }

  &:hover {
    border: 2px solid var(--input-radio-default-color-checked);
  }

  &:checked {
    border: 2px solid var(--input-radio-default-color-checked);

    &::before {
      transform: scale(1);
    }
  }
}
</style>
