<template>
    <div class="hy-radio-button" :style="{ maxWidth: extend ? '' : '25px' }" :class="{ typeRight: type == 'right', transitionsEnabled }">
        <input type="radio" :name="name" :disabled="disabled" :checked="modelValue == value" @change="$emit('update:modelValue', value)" />
        <div class="visual" :class="{ checked: modelValue == value, disabled: disabled }">
            <span class="check"></span>
        </div>
        <div class="label" :class="{ disabled: disabled }" @click="$emit('update:modelValue', value)">
            <slot />
        </div>
    </div>
</template>

<script>
export default {
    name: "HyRadioButton",
    props: {
        modelValue: {
            type: String,
            required: true,
        },
        value: {
            type: String,
            required: true,
        },
        name: {
            type: String,
            required: false,
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        extend: {
            type: Boolean,
            default: true,
        },
        type: {
            type: String,
            default: "left",
        },
    },
    data() {
        return {
            transitionsEnabled: false,
        };
    },
    mounted() {
        requestAnimationFrame(() => (this.transitionsEnabled = true));
    },
};
</script>

<style lang="scss">
.hy-radio-button {
    margin: var(--hy-element-margin);
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--hy-flex-gap);

    &.typeRight {
        flex-direction: row-reverse;
    }

    &.transitionsEnabled {
        input {
            transition: var(--hy-element-transition);
            transition-property: background-color, border-color, filter;
        }

        .visual {
            transition: var(--hy-element-transition);
            transition-property: border-color, background-color, opacity;

            .check {
                transition: var(--hy-element-transition);
                transition-property: opacity;
            }
        }

        .label {
            transition: var(--hy-element-transition);
            transition-property: opacity;
        }
    }

    input {
        width: 25px;
        height: 25px;
        border-radius: var(--hy-element-border-radius);
        cursor: pointer;
        border: var(--hy-element-border-secondary);
        margin: 0;
        padding: 0;
        position: absolute;
        z-index: 1;
        opacity: 0;

        &:disabled {
            cursor: not-allowed;
        }

        &:hover + .visual {
            &:not(.checked) {
                &:not(.disabled) {
                    background-color: var(--hy-variant-secondary-hover-color);
                }
            }

            &.checked {
                &:not(.disabled) {
                    background-color: var(--hy-variant-primary-hover-color);
                }
            }
        }
    }

    .visual {
        background-color: var(--hy-variant-secondary-bg-color);
        border: var(--hy-element-border-secondary);
        border-radius: 99px;
        padding: 0;
        margin: 0;
        box-shadow: var(--hy-element-shadow);
        position: relative;

        // To position check in the middle
        display: grid;
        place-items: center;

        width: 25px;
        height: 25px;
        min-width: 25px;
        max-width: 25px;
        min-height: 25px;
        max-height: 25px;

        &.checked {
            background-color: var(--hy-variant-primary-bg-color);
            border-color: transparent;

            .check {
                opacity: 1;
            }
        }

        &.disabled {
            opacity: 50%;
        }

        .check {
            padding: 0;
            margin: 0;
            display: block;
            opacity: 0;
            width: 5px;
            height: 5px;
            background-color: var(--hy-variant-primary-font-color);
            border-radius: 99px;
        }
    }

    .label {
        position: relative;
        width: max-content;
        flex: 1;
        margin: 0;
        padding: 0;
        cursor: pointer;
        font-weight: normal;

        &.disabled {
            opacity: 50%;
            pointer-events: none;
            cursor: not-allowed;
        }
    }
}
</style>
