import { View, Text } from '@tarojs/components'
import './Slider.scss'
import { ColorType } from '@/context/themes/color'
import { useState } from 'react';
import { rpxToPx } from '@/utils/tools';

export default function () {
    const colors = [
        '#00ffff', '#1cf2ff', '#39e6ff', '#56d9ff', '#73cdff', '#90c1ff', '#adb4ff', '#caa8ff', '#e79bff', '#ffaeff', '#ffffff',
        '#ffebe5',
        '#ffd7cc',
        '#ffc2b2',
        '#ffae99',
        '#ff9a7f',
        '#ff8656',
        '#ff723c',
        '#ff5e23',
        '#ff4909',
        '#ff7a4e'
    ]

    const [brightness, setBrightness] = useState(0);
    const [isSliding, setIsSliding] = useState(false);
    const [value, setValue] = useState(0)
    const [startX, setStartX] = useState(0);

    const handleTouchStart = (event) => {
        setIsSliding(true);
        setStartX(event.touches[0].clientX);
    };

    const handleTouchMove = (event) => {
        if (isSliding) {

            const { touches } = event;
            const touchX = touches[0].clientX;
            const deltaX = touchX - startX;
            // console.log(deltaY,startY,touchY)
            // const containerHeight = rpxToPx(182); // 容器高度，根据实际情况调整
            let brightnessValue = brightness + deltaX / rpxToPx(600 - 120) * 100;// / containerHeight * 100;

            // 边界限制
            brightnessValue = Math.max(0, Math.min(brightnessValue, 100));
            brightnessValue = Math.round(brightnessValue)
            setStartX(touchX)
            setBrightness(brightnessValue);

            setValue(calculateNumber(brightnessValue))
        }
    };

    const handleTouchEnd = () => {
        setIsSliding(false);
    };

    function getColor() {
        var index = Math.round((brightness / 100) * 20)
        return colors[index];
    }

    function calculateOpacity(number) {
        if (number === 0 || number === 100) {
            return 1;
        } else if (number === 50) {
            return 0;
        } else if (number < 50) {
            return 1 - (number / 50);
        } else {
            return (number - 50) / 50;
        }
    }

    function calculateNumber(number) {
        if (number <= 2) {
            return 0;
        } else if (number <= 7) {
            return 0.5;
        } else {
            var result = Math.floor(number / 10);
            var decimal = number % 10;

            if (decimal >= 3 && decimal <= 7) {
                return result + 0.5;
            } else if (decimal >= 8 && decimal <= 9) {
                if (result == 9) {
                    return 9.5
                }
                return result + 1;
            } else {
                return result;
            }
        }
    }


    return <View style={{ display: 'flex', flexDirection: 'column' }}>
        <View className='slider-container'
            catchMove
            onTouchStart={handleTouchStart}
            onTouchMove={handleTouchMove}
            onTouchEnd={handleTouchEnd}>
            <View className='slider-item-bg' style={{ width: brightness * 0.01 * rpxToPx(600 - 120) + rpxToPx(120) }}>


            </View>
            <View className='slider-item' style={{
                width: brightness * 0.01 * rpxToPx(600 - 120) + rpxToPx(120),
                backgroundColor: brightness <= 50 ? ColorType.fast : ColorType.food,
                opacity: calculateOpacity(brightness),
            }}>

            </View>
            <View className='slider-text-bg'>
                <Text className='slider-text'>{value}</Text>
            </View>

        </View>
        {/* <View style={{ display: 'flex', flexDirection: 'row' }}>
            {
                colors.map(item => {
                    return <View style={{ width: 15, height: 40, backgroundColor: item }} />
                })
            }
        </View> */}
    </View>
}