<template>
    <div class="hy-toggle" :style="{ maxWidth: extend ? '' : '25px' }" :class="{ typeRight: type == 'right', transitionsEnabled }">
        <input type="checkbox" :disabled="disabled" :checked="modelValue" @change="$emit('update:modelValue', $event.target.checked)" />
        <div class="visual" :class="{ checked: modelValue, disabled: disabled }">
            <span class="check"></span>
        </div>
        <p class="label" :class="{ disabled: disabled }" @click="$emit('update:modelValue', !modelValue)">
            <slot />
        </p>
    </div>
</template>

<script>
export default {
    name: "HyToggle",
    props: {
        modelValue: {
            type: Boolean,
            required: true,
        },
        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-toggle {
    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, border-color;

            .check {
                transition: var(--hy-element-transition);
                transition-property: left, background-color;
            }
        }

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

    input {
        width: 40px;
        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);

                    .check {
                        background-color: var(--hy-variant-primary-hover-color);
                    }
                }
            }

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

                    .check {
                        background-color: var(--hy-variant-primary-font-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;

        width: 40px;
        min-width: 40px;
        max-width: 40px;

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

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

            .check {
                left: calc(100% - 3px - 15px); // 15px = Width of handle
                right: 3px;
                background-color: var(--hy-variant-primary-font-color);
            }
        }

        &.disabled {
            opacity: 50%;

            &:not(.checked) {
                .check {
                    background-color: var(--hy-element-border-secondary-color);
                }
            }
        }

        .check {
            padding: 0;
            margin: 0;
            display: block;
            position: absolute;
            top: 50%;
            left: 3px;
            transform: translate(0%, -50%);
            width: 15px;
            height: 15px;
            background-color: var(--hy-variant-primary-bg-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>
