<script setup lang="ts">
    import UIButton from '@/UI-kit/components/UI/button/UIButton.vue';
    import { UIColor } from '@/UI-kit/constants';
    import { UIColorName, UIColorValues, UISize } from '@/UI-kit/types';
    import { IButtonType } from '@/UI-kit/types/UI/ui-button.type';
    import { ref } from 'vue';

    interface IRadioOption {
        label: string;
        value: string | boolean;
    }

    const props = withDefaults(
        defineProps<{
            modelValue: string | boolean;
            options: IRadioOption[];
            name: string;
            label?: string;
            bgColor?: UIColorValues;
            size?: UISize;
            errorMessage?: string;
            isError?: boolean;
        }>(),
        {
            bgColor: UIColor[UIColorName.Blue500],
            size: UISize.M,
            errorMessage: '',
            label: '',
            isError: false,
        },
    );

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

    const colorDanger = ref(UIColor[UIColorName.Red600]);

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

    const getComponentProps = (option: IRadioOption) => {
        const isActive = props.modelValue === option.value;
        const bgColor = isActive ? props.bgColor : UIColor[UIColorName.Gray50];

        return {
            text: option.label,
            color: isActive ? UIColor[UIColorName.White] : UIColor[UIColorName.Gray900],
            bgColor,
            activeBgColor: bgColor,
            isActive,
            size: props.size,
            type: IButtonType.BUTTON,
            loaderBorderColor: UIColor[UIColorName.Transparent],
        };
    };
</script>

<template>
    <div>
        <div v-if="label" class="radio-group__label" v-html="label" />
        <div class="radio-group">
            <UIButton
                v-for="option in props.options"
                :key="String(option.value)"
                class="radio-group__button"
                v-bind="getComponentProps(option)"
                @click="handleClick(option.value)"
            />
        </div>
        <div v-if="isError" class="radio-group__error" v-html="errorMessage" />
    </div>
</template>

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

    .radio-group {
        display: flex;
        border-radius: 8px;
        background: var(--gray-50);

        &__button {
            transition: all 0.2s;
        }

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

            color: var(--gray-900);
        }

        &__error {
            text-align: left;
            color: v-bind(colorDanger);
            font-size: 12px;
        }
    }
</style>
