import React, {Component} from 'react';
import {Text, TouchableOpacity, View, TextInput, StyleSheet} from 'react-native';
import {Button, Slider, Provider, Toast,} from "@ant-design/react-native";
import ReadUHF from "../../utils/ReadUHF";
// import SyncStorage from "sync-storage";
import {SyncStorage} from "../../utils";
import ComponentsStyles from "../../components/ComponentsStyles";
import RadioModal from "../../components/RadioModal";

class SetPower extends Component {
    constructor(props) {
        super(props);
        this.state = {
            power: 30,
            no_begin: '8',
            no_length: '14',
            show_type: '1',
            zuhe_temp: '1',
        };
    }

    async componentDidMount() {
        ReadUHF.getPower((ver) => {
            this.setState({
                power: parseInt(ver)
            })
        });
        const no_begin = await SyncStorage.get('no_begin')
        const no_length = await SyncStorage.get('no_length')
        if (no_begin && no_begin) {
            this.setState({no_begin, no_length})
        }
        let show_type = await SyncStorage.get('show_type')
        let zuhe_temp = await SyncStorage.get('zuhe_temp')
        zuhe_temp = zuhe_temp ? zuhe_temp.toString() : '1'
        show_type = show_type ? show_type.toString() : '1'
        this.setState({zuhe_temp, show_type})
    }

    onTypeChange = () => {
        if (this.state.show_type == '1') {
            this.setState({show_type: '0'})
        } else {
            this.setState({show_type: '1'})
        }
    }
    _savePower = async () => {
        let {no_begin, no_length, show_type, zuhe_temp} = this.state;
        no_begin = parseInt(no_begin)
        no_length = parseInt(no_length)

        if (isNaN(no_begin) || isNaN(no_length)) {
            Toast.info('数字填写有误！')
            return
        }

        if (no_begin < 1 || no_begin > 20) {
            Toast.info('起始地址只能填1到20之间的数字！')
            return
        }
        if (no_length < 1 || no_length > 20) {
            Toast.info('长度只能填1到20之间数字！')
            return
        }
        SyncStorage.set('no_begin', no_begin.toString())
        SyncStorage.set('no_length', no_length.toString())
        SyncStorage.set('show_type', show_type)
        SyncStorage.set('zuhe_temp', zuhe_temp)
        ReadUHF.setPower(this.state.power)
        this.props.navigation.goBack();
    }

    render() {
        return (
            <Provider>
                <View style={{padding: 10, backgroundColor:'#fff'}}>
                    <Text style={styles.font14}>当前功率：{this.state.power}</Text>
                    <Slider
                        value={this.state.power}
                        onChange={(value) => {
                            this.setState({power: parseInt(value)})
                        }}
                        min={5}
                        max={30}/>
                    <View style={{flexDirection: 'row',}}>
                        <View style={styles.titleCenter}>
                            <Text style={styles.font14}>NO起始地址：</Text>
                        </View>
                        <TextInput
                            style={styles.textinput}
                            keyboardType={'numeric'}
                            onChangeText={text => this.setState({no_begin: text})}
                            value={this.state.no_begin}
                            placeholder={'请输入'}
                        />
                        <View style={styles.titleCenter}>
                            <Text style={styles.font14}>长度：</Text>
                        </View>
                        <TextInput
                            style={styles.textinput}
                            keyboardType={'numeric'}
                            onChangeText={text => this.setState({no_length: text})}
                            value={this.state.no_length}
                            placeholder={'请输入'}
                        />
                    </View>
                    <View style={{marginTop: 10}}>
                        <TouchableOpacity
                            activeOpacity={0.9}
                            onPress={() => this.onTypeChange()}
                            style={{
                                marginHorizontal: 3,
                                flexDirection: 'row',
                            }}>
                            {this.state.show_type === '1' ?
                                <Text style={{
                                    borderWidth: 1,
                                    width: 18,
                                    height: 18,
                                    textAlign: 'center',
                                    color: 'red'
                                }}>√</Text>
                                :
                                <Text style={{
                                    borderWidth: 1,
                                    width: 18,
                                    height: 18,
                                }}/>
                            }<Text style={styles.font14}> 只显示本类别芯片</Text>
                        </TouchableOpacity>
                    </View>
                    <View style={{marginTop: 10, flexDirection: 'row'}}>
                        <View style={styles.titleCenter}>
                            <Text style={styles.font14}>组合互感器模板：</Text>
                        </View>
                        <RadioModal
                            selectedValue={this.state.zuhe_temp}
                            onValueChange={id => this.setState({zuhe_temp: id})}
                            style={ComponentsStyles.radioStyle}
                            innerStyle={{
                                width: 80,
                            }}
                        >
                            <Text value="1">电压模板</Text>
                            <Text value="2">电流模板</Text>
                        </RadioModal>
                    </View>
                    <Button onPress={() => this._savePower()}
                            type="primary"
                            style={{
                                marginTop: 20,
                                backgroundColor: '#0099FF',
                                borderWidth: 0,
                            }}
                    >
                        <Text style={{color: '#fff'}}>
                            保存
                        </Text>
                    </Button>
                </View>
            </Provider>
        )
    }
}

const styles = StyleSheet.create({
    textinput: {
        width: 60,
        textAlign: "left",
        height: 45,
        borderBottomWidth: 1,
        borderBottomColor: '#878787',
    },
    font14: {
        color: '#333',
        fontSize: 14,
    },
    titleCenter: {
        justifyContent: 'center',
    },
})
export default SetPower