import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    ScrollView,
    Alert,
    DeviceEventEmitter
} from 'react-native';

import {WhiteSpace, List, InputItem, Provider, Toast} from '@ant-design/react-native';

import {connect} from 'react-redux'
import {Button} from "../../components";
import ReadUHF from "../../utils/ReadUHF";

@connect(home => ({...home}))
class UHFDeliver extends Component {
    constructor(props) {
        super(props);
        this.state = {
            notes: '',
            distributor: '',
            distributor_name: '',
            type: this.props.navigation.state.params.type,
            no: '',
            total: 0,
            isStart: true,
            productDatas: [],
        };
    }

    componentDidMount() {
        ReadUHF.changeFlag(1)
        DeviceEventEmitter.addListener('MsgFromAndroid', this._addProduct);
        DeviceEventEmitter.addListener('onKeyDown', this.onKeyDown);
    }

    componentWillUnmount() {
        ReadUHF.stopRead()
    }

    _addProduct = (start_no) => {
        // 防止重复扫描
        let {productDatas} = this.state;
        const product_index = productDatas.indexOf(start_no)
        if (product_index < 0) {
            productDatas.push(start_no)
            this.setState({total: productDatas.length, productDatas})
        }
    }
    _onSave = () => {
        const type = this.props.navigation.state.params.type
        if (this.state.distributor == '') {
            Alert.alert('提示', "请选择经销商!");
            return
        }
        if (this.state.productDatas.length == 0) {
            Alert.alert('提示', "请添加产品!");
            return
        }
        const save_data = {
            "distributor": this.state.distributor,
            "notes": this.state.notes,
            "details": JSON.stringify(this.state.productDatas),
            "save_type": 'UHF',
        }
        if (type == 'Deliver') {
            this.props.dispatch({
                type: 'home/deliverSave',
                payload: save_data,
                callback: (data) => {
                    if (data.msg) {
                        Alert.alert('提示', data.msg);
                    }
                    this.props.navigation.goBack();

                },
            });
        } else {
            this.props.dispatch({
                type: 'home/returnSave',
                payload: save_data,
                callback: (data) => {
                    if (data.msg) {
                        Alert.alert('提示', data.msg);
                    }
                    this.props.navigation.goBack();
                },
            });
        }
    }

    _start = () => {
        let {isStart} = this.state;
        ReadUHF.doRead()
        this.setState({isStart: !isStart})
    }

    onKeyDown = () => {
        let {isStart} = this.state;
        this.setState({isStart: !isStart})
    }

    render() {
        let {isStart} = this.state;
        const start_text = isStart ? '开始识别' : '停止识别'
        return (
            <View style={{flex: 1}}>
                <Provider>
                    <ScrollView style={{flex: 1}}>
                        <WhiteSpace/>
                        <List>
                            <List.Item extra={this.state.distributor_name} arrow="horizontal"
                                       multipleLine={true} wrap={true}
                                       onPress={() => this.props.navigation.navigate('SearchDistributor',
                                           {
                                               callback: (data) => this.setState({
                                                   distributor_name: data.name,
                                                   distributor: data.id
                                               })
                                           }
                                       )}><Text style={styles.redText}>经销商</Text></List.Item>

                            <InputItem
                                clear
                                placeholder="请输入"
                                value={this.state.notes}
                                onChange={value => {
                                    this.setState({
                                        notes: value,
                                    });
                                }}
                            ><Text style={{fontSize: 17, color: '#333'}}>备注</Text>
                            </InputItem>
                        </List>
                        {this.state.productDatas.map((item, index) => (
                            <View key={index} style={styles.cellContainer}>

                                <View style={styles.rowPadding3}>
                                    <View style={styles.left}>
                                        <Text style={styles.blackText}>鞋子</Text>
                                    </View>
                                    <Text style={styles.blackText}>数量：1</Text>
                                </View>
                                <View style={styles.rowPadding3}>
                                    <View style={styles.left}>
                                        <Text style={styles.blackText}>编号:{item}</Text>
                                    </View>
                                </View>
                            </View>
                        ))}
                    </ScrollView>
                </Provider>
                <View style={{
                    backgroundColor: '#eee', height: 20, justifyContent: 'flex-end',
                    flexDirection: 'row', paddingRight: 10
                }}>
                    <Text style={{fontSize: 14, textAlignVertical: 'center'}}>总数量：{this.state.total}</Text></View>
                <View style={{flexDirection: 'row', height: 40}}>
                    <Button onPress={() => this._start()}
                            textStyle={{color: 'white'}}
                            style={{
                                flex: 1,
                                borderRadius: 0,
                                borderWidth: 0,
                                backgroundColor: isStart ? '#0099FF' : 'red',
                                color: '#fff'
                            }} title={start_text}/>
                    <Button onPress={() => Alert.alert(
                        '提示',
                        '确定要保存吗？',
                        [
                            {text: '确定', onPress: () => this._onSave()},
                            {text: '取消'},
                        ]
                    )} textStyle={{color: 'white'}} style={{
                        flex: 1,
                        borderRadius: 0,
                        borderWidth: 0,
                        backgroundColor: '#7DBEFF',
                        color: '#fff'
                    }} title='保存'/>

                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    input: {
        borderBottomWidth: 1,
        borderBottomColor: '#eee',
        marginBottom: 15
    },
    redText: {
        color: 'red',
        fontSize: 15,
    },
    cellContainer: {
        paddingVertical: 5,
        paddingHorizontal: 5,
        borderBottomWidth: 1,
        borderColor: '#eee',
        marginHorizontal: 5,
        overflow: 'hidden'

    },
    rowPadding3: {
        flexDirection: 'row',
        padding: 3,
    },
    left: {
        flex: 3,
        flexDirection: 'row',
    },
    blackText: {
        color: '#333',
        fontSize: 14,
    },
})

export default UHFDeliver;