<template>
    <view class="im-checkbox" :class="[
        `im-checkbox--${innerSize}`,
        `im-checkbox--${type}`,
        {
            'im-checkbox--disabled': disabled,
            'im-checkbox--checked': isChecked,
            'im-checkbox--indeterminate': indeterminate,
            'im-checkbox--readonly': readonly,
            'im-checkbox--bordered': bordered
        }
    ]" :style="[customStyle, computedStyle]" @click="handleClick" @touchstart="handleTouchStart"
        @touchend="handleTouchEnd">
        <!-- 复选框内容 -->
        <view class="im-checkbox__wrapper">
            <!-- 图标区域 -->
            <view class="im-checkbox__icon">
                <slot name="icon" :checked="isChecked" :disabled="disabled" :indeterminate="indeterminate">
                    <!-- 默认图标 -->
                    <template v-if="type === 'square'">
                        <view class="im-checkbox__icon-square" :class="{
                            'im-checkbox__icon-square--checked': isChecked,
                            'im-checkbox__icon-square--indeterminate': indeterminate
                        }">
                            <view v-if="isChecked && !indeterminate" class="im-checkbox__checkmark" />
                            <view v-else-if="indeterminate" class="im-checkbox__indeterminate-mark" />
                        </view>
                    </template>

                    <!-- 圆形图标 -->
                    <template v-else-if="type === 'circle'">
                        <view class="im-checkbox__icon-circle" :class="{
                            'im-checkbox__icon-circle--checked': isChecked
                        }">
                            <view v-if="isChecked" class="im-checkbox__checkmark" />
                        </view>
                    </template>

                    <!-- 开关样式 -->
                    <template v-else-if="type === 'switch'">
                        <!-- :color="switchColor" :backgroundColor="switchBackgroundColor" -->
                        <switch :checked="isChecked" :color="props.checkedColor"
                            :class="[`im-checkbox__switch--${innerSize}`]" :disabled="disabled" />
                        <!-- <view class="im-checkbox__switch" :class="{
                            'im-checkbox__switch--checked': isChecked
                        }">
                            <view class="im-checkbox__switch-handle" />
                        </view> -->
                    </template>

                    <!-- 按钮样式 -->
                    <template v-else-if="type === 'button'">
                        <view class="im-checkbox__button" :class="{
                            'im-checkbox__button--checked': isChecked
                        }">
                            <view class="im-checkbox__button-content">
                                <slot>
                                    <text v-if="label" class="im-checkbox__button-text">
                                        {{ label }}
                                    </text>
                                </slot>
                            </view>
                        </view>
                    </template>
                </slot>
            </view>

            <!-- 标签区域 -->
            <view v-if="type !== 'button' && (label || $slots.default)" class="im-checkbox__label" :class="{
                'im-checkbox__label--disabled': disabled,
                'im-checkbox__label--checked': isChecked
            }">
                <!-- 默认插槽 -->
                <slot>
                    <text class="im-checkbox__label-text">{{ label }}</text>
                </slot>

                <!-- 描述文本 -->
                <text v-if="description" class="im-checkbox__description">
                    {{ description }}
                </text>
            </view>
        </view>

        <!-- 角标 -->
        <view v-if="badge" class="im-checkbox__badge" :class="[
            `im-checkbox__badge--${badge.type || 'dot'}`,
            `im-checkbox__badge--${badge.position || 'top-right'}`
        ]" :style="badgeStyle">
            <text v-if="badge.type === 'number' || badge.type === 'text'" class="im-checkbox__badge-text">
                {{ badge.value }}
            </text>
        </view>
    </view>
</template>

<script setup lang="ts">
import {
    computed,
    inject,
    onMounted,
    onUnmounted
} from 'vue'
import type {
    CheckboxProps,
    CheckboxEmits
} from '../../types/components/checkbox'
import type {
    CheckboxGroupContext
} from '../../types/components/checkbox-group'

const props = withDefaults(defineProps<CheckboxProps>(), {
    modelValue: false,
    value: '',
    label: '',
    description: '',
    disabled: false,
    readonly: false,
    indeterminate: false,
    size: '',
    type: 'square',
    checkedColor: '#07c160',
    uncheckedColor: '#dcdee0',
    disabledColor: '#c8c9cc',
    borderColor: '',
    bordered: false,
    badge: undefined,
    clickable: true,
    customStyle: () => ({})
})

const emit = defineEmits<CheckboxEmits>()

// 获取复选框组上下文
const checkboxGroup = inject<CheckboxGroupContext | null>('imCheckboxGroup', null)

const innerSize = computed(() => {
    const defultSize = 'medium'

    if (checkboxGroup) {
        if (checkboxGroup.size && props.size) {
            return props.size
        }

        if (checkboxGroup.size) {
            return checkboxGroup.size
        }
        else {
            return props.size || defultSize
        }
    } else {
        return props.size || defultSize
    }
})

// 计算是否选中
const isChecked = computed(() => {
    if (checkboxGroup) {
        // 在复选框组中
        const groupValue = checkboxGroup.modelValue
        return groupValue.includes(props.value as string | number)
    } else {
        // 独立使用
        return !!props.modelValue
    }
})

// 计算样式
const computedStyle = computed(() => {
    const style: Record<string, any> = {}

    // 添加颜色变量
    if (props.borderColor) {
        style['--checkbox-border-color'] = props.borderColor
    }

    if (props.checkedColor) {
        style['--checkbox-checked-color'] = props.checkedColor
    }

    return style
})

// 角标样式
const badgeStyle = computed(() => {
    if (!props.badge) return {}

    const style: Record<string, any> = {}

    if (props.badge.color) {
        style.color = props.badge.color
    }

    if (props.badge.backgroundColor) {
        style.backgroundColor = props.badge.backgroundColor
    }

    return style
})

// 注册和注销
onMounted(() => {
    if (checkboxGroup && checkboxGroup.registerCheckbox && props.value) {
        checkboxGroup.registerCheckbox(props.value as string | number)
    }
})

onUnmounted(() => {
    if (checkboxGroup && checkboxGroup.unregisterCheckbox && props.value) {
        checkboxGroup.unregisterCheckbox(props.value as string | number)
    }
})

// 处理点击事件
const handleClick = (event: Event) => {
    if (props.disabled || props.readonly || !props.clickable) {
        return
    }

    emit('click', event)

    if (checkboxGroup) {
        checkboxGroup.handleChange(props.value as string | number)
    } else {
        // 独立使用
        const newValue = !props.modelValue
        emit('update:modelValue', newValue)
        emit('change', newValue)
    }
}

// 触摸开始
const handleTouchStart = (event: Event) => {
    // 可以添加触摸反馈效果
}

// 触摸结束
const handleTouchEnd = (event: Event) => {
    // 可以添加触摸反馈效果
}
</script>

<style lang="scss" scoped>
.im-checkbox {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;

    // 状态类
    &--disabled {
        cursor: not-allowed;
        opacity: 0.6;

        view {
            pointer-events: none;
        }
    }

    &--readonly {
        cursor: default;
    }

    &:not(.im-checkbox--disabled):not(.im-checkbox--readonly):active {
        opacity: 0.8;
    }

    // 带边框
    &--bordered {
        padding: 16rpx 24rpx;
        border: 2rpx solid var(--checkbox-border-color, #f0f0f0);
        border-radius: 12rpx;
        background-color: #ffffff;

        &:not(.im-checkbox--disabled):hover {
            border-color: #e0e0e0;
        }

        &.im-checkbox--checked {
            border-color: var(--checkbox-checked-color, #07c160);
            background-color: rgba(7, 193, 96, 0.05);
        }
    }

    // 大小类
    $sizes: (
        small: (wrapper-font-size: 24rpx,
            icon-size: 32rpx,
            checkmark-width: 16rpx,
            checkmark-height: 8rpx,
            switch-width: 80rpx,
            switch-height: 40rpx,
            switch-handle-size: 36rpx,
            button-padding: 8rpx 16rpx,
            button-font-size: 24rpx),
        medium: (wrapper-font-size: 28rpx,
            icon-size: 40rpx,
            checkmark-width: 20rpx,
            checkmark-height: 10rpx,
            switch-width: 96rpx,
            switch-height: 48rpx,
            switch-handle-size: 44rpx,
            button-padding: 12rpx 24rpx,
            button-font-size: 28rpx),
        large: (wrapper-font-size: 32rpx,
            icon-size: 48rpx,
            checkmark-width: 24rpx,
            checkmark-height: 12rpx,
            switch-width: 112rpx,
            switch-height: 56rpx,
            switch-handle-size: 52rpx,
            button-padding: 16rpx 32rpx,
            button-font-size: 32rpx)
    );

@each $size, $map in $sizes {
    &--#{$size} {
        .im-checkbox__wrapper {
            font-size: map-get($map, wrapper-font-size);
        }

        .im-checkbox__icon-square,
        .im-checkbox__icon-circle {
            width: map-get($map, icon-size);
            height: map-get($map, icon-size);

            &--checked {
                .im-checkbox__checkmark {
                    width: map-get($map, checkmark-width);
                    height: map-get($map, checkmark-height);
                }
            }
        }

        .im-checkbox__switch {
            width: map-get($map, switch-width);
            height: map-get($map, switch-height);

            &-handle {
                width: map-get($map, switch-handle-size);
                height: map-get($map, switch-handle-size);
            }
        }

        .im-checkbox__button {
            padding: map-get($map, button-padding);
            font-size: map-get($map, button-font-size);
        }
    }
}

&__switch {
    &--small {
        transform: scale(0.5);
    }

    &--medium {
        transform: scale(0.7);
    }

    &--large {
        transform: scale(1.5);
    }
}

// 组件内部样式
&__wrapper {
    display: flex;
    align-items: center;
    flex: 1;
}

&__icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    // 方形图标
    &-square {
        border: 2rpx solid var(--checkbox-unchecked-color, #dcdee0);
        border-radius: 6rpx;
        background-color: #ffffff;
        transition: all 0.2s ease;

        &--checked {
            border-color: var(--checkbox-checked-color, #07c160);
            background-color: var(--checkbox-checked-color, #07c160);
        }

        &--indeterminate {
            border-color: var(--checkbox-checked-color, #07c160);
            background-color: var(--checkbox-checked-color, #07c160);
        }

        .im-checkbox--disabled & {
            border-color: var(--checkbox-disabled-color, #c8c9cc);
            background-color: #f5f5f5;
        }
    }

    // 圆形图标
    &-circle {
        border: 2rpx solid var(--checkbox-unchecked-color, #dcdee0);
        border-radius: 50%;
        background-color: #ffffff;
        transition: all 0.2s ease;

        &--checked {
            border-color: var(--checkbox-checked-color, #07c160);
            background-color: var(--checkbox-checked-color, #07c160);
        }

        .im-checkbox--disabled & {
            border-color: var(--checkbox-disabled-color, #c8c9cc);
            background-color: #f5f5f5;
        }
    }

    // 开关
    &-switch {
        border-radius: 100rpx;
        background-color: var(--checkbox-unchecked-color, #dcdee0);
        transition: all 0.3s cubic-bezier(0.3, 0, 0.15, 1);
        position: relative;

        &--checked {
            background-color: var(--checkbox-checked-color, #07c160);
        }

        .im-checkbox--disabled & {
            background-color: var(--checkbox-disabled-color, #c8c9cc);
        }
    }
}

&__checkmark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%) rotate(-45deg);
    transform-origin: center;

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-left: solid 2rpx #ffffff;
        border-bottom: solid 2rpx #ffffff;
        box-sizing: border-box;
    }
}

&__indeterminate-mark {
    width: 16rpx;
    height: 2rpx;
    background-color: #ffffff;
    border-radius: 1rpx;
}

&__switch-handle {
    position: absolute;
    top: 2rpx;
    left: 2rpx;
    border-radius: 50%;
    background-color: #ffffff;
    transition: all 0.3s cubic-bezier(0.3, 0, 0.15, 1);
    box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);

    .im-checkbox__icon-switch--checked & {
        left: calc(100% - 2rpx);
        transform: translateX(-100%);
    }
}

&__button {
    border: 2rpx solid var(--checkbox-unchecked-color, #dcdee0);
    border-radius: 8rpx;
    background-color: #ffffff;
    transition: all 0.2s ease;

    &--checked {
        border-color: var(--checkbox-checked-color, #07c160);
        background-color: var(--checkbox-checked-color, #07c160);
        color: #ffffff;
    }

    .im-checkbox--disabled & {
        border-color: var(--checkbox-disabled-color, #c8c9cc);
        background-color: #f5f5f5;
    }

    &-content {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    &-text {
        font-weight: 500;
    }
}

&__label {
    margin-left: 16rpx;
    color: #333333;
    flex: 1;

    &--disabled {
        color: #999999;
    }

    &--checked {
        font-weight: 500;
    }
}

&__label-text {
    line-height: 1.4;
}

&__description {
    display: block;
    margin-top: 4rpx;
    font-size: 80%;
    color: #666666;
    line-height: 1.3;
}

// 角标
&__badge {
    position: absolute;
    z-index: 1;

    // 位置
    &--top-right {
        top: -8rpx;
        right: -8rpx;
    }

    &--top-left {
        top: -8rpx;
        left: -8rpx;
    }

    &--bottom-right {
        bottom: -8rpx;
        right: -8rpx;
    }

    &--bottom-left {
        bottom: -8rpx;
        left: -8rpx;
    }

    // 类型
    &--dot {
        width: 16rpx;
        height: 16rpx;
        border-radius: 50%;
        background-color: #e64340;
    }

    &--number,
    &--text {
        min-width: 32rpx;
        height: 32rpx;
        padding: 0 8rpx;
        border-radius: 16rpx;
        background-color: #e64340;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    &-text {
        font-size: 20rpx;
        color: #ffffff;
        font-weight: 500;
        line-height: 1;
    }
}
}
</style>