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

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

    componentDidMount() {
        ReadUHF.getPower((ver) => {
            this.setState({
                power: parseInt(ver)
            })
        });
        const no_begin = SyncStorage.get('no_begin')
        const no_length = SyncStorage.get('no_length')
        if (no_begin && no_begin) {
            this.setState({no_begin, no_length})
        }
    }

    _savePower = () => {
        let {no_begin, no_length} = 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())
        ReadUHF.setPower(this.state.power)
        this.props.navigation.goBack();
    }

    render() {
        return (
            <Provider>
                <View style={{margin: 10}}>
                    <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>
                    <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
