import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet, Image, Switch } from 'react-native';
import Slider from '@react-native-community/slider';  // 修改这里的导入
import { rpx } from '../../utils/rpx';
import { useNavigation } from '@react-navigation/native';
const UnlockSetting = () => {
    const navigation = useNavigation();
    const [isAutoOff, setIsAutoOff] = useState(true);
    const [sliderValue, setSliderValue] = useState(1); // 1表示标准
    const [isCustomDistance, setIsCustomDistance] = useState(false); // 是否自定义距离

    return (
        <View style={styles.container}>
            <Image source={{ uri: 'https://api.ccttiot.com/smartmeter/img/static/uKcmg9OiTA72mIm59GRh' }} style={styles.img} />
            <View style={styles.card}>
                <View style={styles.cont_li}>
                    <View style={styles.cont_li_content}>
                        <View style={styles.cont_li_top}>
                            <Image source={{ uri: 'https://api.ccttiot.com/smartmeter/img/static/ue1qF3cHAVlV8Fn5CKV6' }} style={styles.icon_set} />
                            <Text style={styles.text_set}>无感解锁</Text>
                            <View style={styles.cont_li_right}>
                                <Switch
                                    onValueChange={() => setIsAutoOff(!isAutoOff)}
                                    value={isAutoOff}
                                    trackColor={{ false: '#767577', true: '#4297F3' }}
                                    thumbColor={'#fff'}
                                />
                            </View>
                        </View>
                        <Text style={styles.tipTxt}>1.手机打开蓝牙并靠近车辆即可自动解锁，解锁时请尽 量减少手机与车辆之间的遮挡</Text>
                        <Text style={styles.tipTxt}>2.若解锁遇到问题，建议您尝试重新连接蓝牙，或尝试 调节无感解锁的感应距离</Text>
                    </View>
                </View>
            </View>

            {isAutoOff && (
                <View style={styles.card}>
                    <View style={styles.cont_li}>
                        <View style={styles.cont_li_content}>
                            <View style={styles.cont_li_top}>
                                <Image source={{ uri: 'https://api.ccttiot.com/smartmeter/img/static/uBAdXDKxFsApstvKlEWo' }} style={styles.icon_set} />
                                <Text style={styles.text_set}>解锁位置</Text>
                            </View>
                            <View style={styles.distanceOptions}>
                                <TouchableOpacity
                                    style={[styles.distanceOption, !isCustomDistance && styles.selectedOption]}
                                    onPress={() => setIsCustomDistance(false)}
                                >
                                    <View style={[styles.radioButton, !isCustomDistance && styles.selectedRadioButton]}>
                                        <View style={[styles.radioInner, !isCustomDistance && styles.radioInnerSelected]} />
                                    </View>
                                    <Text style={[styles.distanceText, !isCustomDistance && styles.selectedText]}>设备距离</Text>
                                </TouchableOpacity>
                               
                            </View>
                            <View style={styles.sliderContainer}>
                                <Slider
                                    style={styles.slider}
                                    minimumValue={0}
                                    maximumValue={2}
                                    value={sliderValue}
                                    onValueChange={setSliderValue}
                                    minimumTrackTintColor="#4297F3"
                                    maximumTrackTintColor="#EBEBEB"
                                />
                                <View style={styles.sliderLabels}>
                                    <Text style={styles.sliderLabel}>近</Text>
                                    <Text style={styles.sliderLabel}>标准</Text>
                                    <Text style={styles.sliderLabel}>远</Text>
                                </View>
                            </View>
                            <View style={styles.distanceOptions}>
                               
                                <TouchableOpacity 
                                    style={[styles.distanceOption, isCustomDistance && styles.selectedOption]}
                                    onPress={() => setIsCustomDistance(true)}
                                >
                                    <View style={[styles.radioButton, isCustomDistance && styles.selectedRadioButton]}>
                                        <View style={[styles.radioInner, isCustomDistance && styles.radioInnerSelected]} />
                                    </View>
                                    <Text style={[styles.distanceText, isCustomDistance && styles.selectedText]}>自定义距离</Text>
                                </TouchableOpacity>
                                {isCustomDistance && (
                                    <TouchableOpacity style={styles.distanceBtn} onPress={() => navigation.navigate('BleDistance' as never)}>  
                                        <Text style={styles.distanceBtnTxt}>标定</Text>
                                    </TouchableOpacity>
                                )}
                            </View>
                        </View>
                    </View>
                </View>
            )}
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        backgroundColor: '#F3FCFF',
    },
    distanceBtn: {
        marginLeft: 'auto',
        marginRight: rpx(40),
        width: rpx(154),
        height: rpx(56),
        backgroundColor: '#4297F3',
        borderRadius: rpx(28),
        alignItems: 'center',
        justifyContent: 'center',
    },
    distanceBtnTxt: {
        fontWeight: '500',
        fontSize: rpx(32),
        color: '#fff',
    },
    selectedOption: {
        backgroundColor: '#F5F5F5',
        borderRadius: rpx(30),
    },
    selectedText: {
        color: '#4297F3',
    },
    selectedRadioButton: {
        borderColor: '#4297F3',
    },
    distanceOptions: {
        flexDirection: 'row',
        marginTop: rpx(20),
        marginLeft: rpx(62),
    },
    distanceOption: {
        flexDirection: 'row',
        alignItems: 'center',
        marginRight: rpx(40),
    },
    radioButton: {
        width: rpx(40),
        height: rpx(40),
        borderRadius: rpx(20),
        borderWidth: 2,
        borderColor: '#CCCCCC',
        alignItems: 'center',
        justifyContent: 'center',
        marginRight: rpx(10),
    },
    radioInner: {
        width: rpx(24),
        height: rpx(24),
        borderRadius: rpx(12),
        backgroundColor: 'transparent',
    },
    radioInnerSelected: {
        backgroundColor: '#4297F3',
    },
    distanceText: {
        fontSize: rpx(28),
        color: '#333',
    },
    sliderContainer: {
        marginTop: rpx(30),
        marginLeft: rpx(62),
        width: '85%',
    },
    slider: {
        width: '100%',
        height: rpx(40),
    },
    sliderLabels: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginTop: rpx(10),
    },
    sliderLabel: {
        fontSize: rpx(24),
        color: '#999',
    },
    img: {
        width: rpx(688),
        height: rpx(600),
    },
    card: {
        marginTop: rpx(20),
        width: rpx(688),
        backgroundColor: '#fff',
        borderRadius: rpx(30),
        padding: rpx(30),
        paddingTop: rpx(0),
    },
    icon_set: {
        width: rpx(50),
        height: rpx(50),
    },
    cont_li: {
        paddingTop: rpx(32),
        paddingBottom: rpx(32),
        borderBottomWidth: rpx(1),
        borderBottomColor: '#EBEBEB',
    },
    cont_li_right: {
        marginLeft: 'auto',
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
    },
    cont_li_content: {
        flexDirection: 'column',
    },
    cont_li_top: {
        width: '100%',
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: rpx(8),
    },
    text_set: {
        fontWeight: '500',
        fontSize: rpx(36),
        color: '#333',
        marginLeft: rpx(10),
    },
    rightTxt: {
        fontWeight: '500',
        fontSize: rpx(28),
        color: '#4297F3',
        marginRight: rpx(8),
    },
    icon_right: {
        width: rpx(32),
        height: rpx(32),
    },
    tipTxt: {
        width: '85%',
        marginLeft: rpx(62),
        fontSize: rpx(28),
        color: '#999',
        marginTop: rpx(8),
    },
});

export default UnlockSetting;   