import { ref, onMounted, onBeforeUnmount } from 'vue';
import debounce from 'lodash/debounce';

export function useAdaptation(ranges, handleChange) {
    // 创建 media query 对象列表
    const mediaQueryLists = ranges.map(range => {
        const minQuery = range.minWidth ? window.matchMedia(`(min-width: ${range.minWidth})`) : null;
        const maxQuery = range.maxWidth ? window.matchMedia(`(max-width: ${parseInt(range.maxWidth) - 0.1}px)`) : null;  // 修改 maxWidth，确保不包括 max
        return { minQuery, maxQuery };
    });

    // 定义当前匹配的区间
    const currentRange = ref(getCurrentRange());

    // 获取当前匹配的区间
    function getCurrentRange() {
        for (let i = 0; i < mediaQueryLists.length; i++) {
            const { minQuery, maxQuery } = mediaQueryLists[i];
            const minMatches = minQuery ? minQuery.matches : true;
            const maxMatches = maxQuery ? maxQuery.matches : true;
            if (minMatches && maxMatches) {
                return ranges[i];
            }
        }
        // 如果没有匹配的区间，返回最后一个区间
        return ranges[ranges.length - 1];
    }

    // 处理窗口大小变化（加上防抖）
    const handleDeviceChange = debounce(() => {
        const newRange = getCurrentRange();
        if (currentRange.value !== newRange) {
            currentRange.value = newRange;
            if (typeof handleChange === 'function' && newRange) {
                handleChange(newRange);
            }
        }
    }, 200);

    // 在组件挂载时添加事件监听器
    onMounted(() => {
        mediaQueryLists.forEach(({ minQuery, maxQuery }) => {
            if (minQuery) minQuery.addEventListener('change', handleDeviceChange);
            if (maxQuery) maxQuery.addEventListener('change', handleDeviceChange);
        });

        // 初始调用以设置正确的区间
        handleDeviceChange();
    });

    // 在组件卸载时移除事件监听器
    onBeforeUnmount(() => {
        mediaQueryLists.forEach(({ minQuery, maxQuery }) => {
            if (minQuery) minQuery.removeEventListener('change', handleDeviceChange);
            if (maxQuery) maxQuery.removeEventListener('change', handleDeviceChange);
        });
    });

    // 返回当前匹配的区间，包括 min，但不包括 max
    return { currentRange };
}
