<script setup lang="ts">
    import { UIColorName, UIColorValues } from '@/UI-kit/types';
    import { UIColor } from '@/UI-kit/constants';

    withDefaults(
        defineProps<{
            modelValue: string | boolean;
            label?: string;
            bgColor?: UIColorValues;
            errorMessage?: string;
            isError?: boolean;
            name: string;
            options: {
                label: string;
                value: string | boolean;
            }[];
        }>(),
        {
            bgColor: UIColor[UIColorName.Blue500],
            errorMessage: '',
            label: '',
            isError: false,
        },
    );

    const emit = defineEmits(['update:modelValue', 'input']);

    const handleClick = (value: string | boolean) => {
        emit('update:modelValue', value);
        emit('input', value);
    };
</script>

<template>
    <div class="ui-radio__block">
        <div v-if="label" class="ui-radio__label" v-html="label" />
        <div class="ui-radio__list">
            <label v-for="(item, idx) in options" :key="idx" class="ui-radio__item">
                <input
                    type="radio"
                    :name="name"
                    :checked="item.value === modelValue"
                    :value="item.value"
                    class="ui-radio"
                    @change="handleClick(item.value)"
                />
                <span class="ui-radio__radio-custom" />
                <span class="ui-radio__label-option">{{ item.label }}</span>
            </label>
        </div>
        <div v-if="isError" class="ui-radio__error" v-html="errorMessage" />
    </div>
</template>

<style lang="scss" scoped>
    @use '@/UI-kit/assets/scss/mixins/index.mixin';

    .ui-radio {
        display: none;

        &:checked + .ui-radio__radio-custom {
            border-color: var(--blue-500);

            &:after {
                position: absolute;
                top: 50%;
                left: 50%;
                display: block;
                width: 10px;
                height: 10px;
                content: '';
                background-color: var(--blue-500);
                border-radius: 50%;
                transform: translate(-50%, -50%);
            }
        }

        &__block {
            @include index.flex(column, 4px);
        }

        &__list {
            @include index.flex(column, 12px);
        }

        &__item {
            @include index.flex(row, 12px, center);

            cursor: pointer;
        }

        &__radio-custom {
            position: relative;
            width: 20px;
            height: 20px;
            border: 2px solid var(--gray-300);
            transition: all 0.2s ease;
            border-radius: 50%;
            flex-shrink: 0;
        }

        &__label {
            @include index.text(14px, 600, 20px, var(--gray-900));

            &-option {
                @include index.text(14px, 500, 20px, var(--gray-900));
            }
        }

        &__error {
            text-align: left;
            color: var(--red-600);
            font-size: 12px;
        }
    }
</style>
