'use strict';

import React, {Component} from 'react';
import LoadMoreIndicator from '../indicator/LoadMoreIndicator';
import LoadingIndicator from '../indicator/LoadingIndicator';
import moment from 'moment';
import DeliverGoodsCell from './DeliverGoodsCell';

import {
    StyleSheet,
    View,
    Text,
    ListView,
    Image,
    Dimensions,
    TouchableOpacity,
	TextInput,
	Picker,
} from 'react-native';

export default class DeliverGoods extends Component {

    constructor(props) {
        super (props);
		this.dataSource = new ListView.DataSource({
			rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
		});
		this._renderRow = this._renderRow.bind(this);
		this._picker = this._picker.bind(this);
        this._onChangeText = this._onChangeText.bind(this);
        this._onValueChange = this._onValueChange.bind(this);

		this.state = {
			showPicker: false,
		};
	}

    _onChangeText(text){
        this.props.setExpressNum && this.props.setExpressNum(text);
    }

    _onValueChange(value){
        let {initialRes,resource} = this.props;
        let {expressList} = resource;
        let list = expressList?expressList.list:[];
        let param = null;
        list.map((item, i) => {
            if (item.get('id') == value) {
                param = item?item.toJS():'';
            }
        })
        this.props.setExpressValue && this.props.setExpressValue(param,initialRes);
    }

	_renderRow(rowData, sectionID, rowID) {
		return(
			<DeliverGoodsCell resource={rowData}/>
		);
	}

    _picker() {
        let {expressList,expressValue} = this.props.resource;
        let list = expressList?expressList.list:[];

        return (
            <View style={styles.pickerContainer}>
                <TouchableOpacity onPress={() => {
                    this.setState({showPicker: false});
                }}>
                    <View style={styles.pickerSpaceContainer}/>
                </TouchableOpacity>
                <View style={styles.pickerSubContainer}>
                    <Picker
                        selectedValue={expressValue?expressValue.get('id'):''}
                        onValueChange={this._onValueChange}>

                        {list.map((value, i) => {
                            return (<Picker.Item key={'Picker'+i} label={value.get('companyName')} value={value.get('id')} />);
                            })
                        }
                    </Picker>
                </View>
            </View>
        );
    }

	render() {
        let {initialRes,resource} = this.props;
        let {expressList,storehouse,expressNum,expressValue} = resource;

        let address = storehouse?storehouse.get('address'):'';
        let adminName = storehouse?storehouse.get('adminName'):'';
        let storehouseName = storehouse?storehouse.get('storehouseName'):'';
        let phone = storehouse?storehouse.get('phone'):'';
        let expressName = expressValue?expressValue.get('companyName'):'';

		return (
            <View style={styles.container}>
				<View style={styles.cell0}>
					<Text style={styles.numberName} numberOfLines={1}>
						物流公司：
					</Text>
					<TouchableOpacity onPress={() => {
						this.setState({showPicker: !this.state.showPicker});
                    }}>
						<View style={styles.pickerView}>
							<Text style={styles.pickerText} numberOfLines={1}>
								{expressName}
							</Text>
						</View>
					</TouchableOpacity>
				</View>
				<View style={styles.cell0}>
					<Text style={styles.numberName} numberOfLines={1}>
						物流单号：
					</Text>
					<TextInput style={styles.numberInputText}
                        ref = 'textInput1'
    					placeholder={'输入物流单号'}
						onChangeText={this._onChangeText}
						value={expressNum}
    				/>
                    <TouchableOpacity onPress={() => {
                        this.props.startScanQRCode && this.props.startScanQRCode();
                    }}>
                        <View style={styles.cameraView}>
                            <Image style={styles.camera} source={require('../../images/fahuo/home_qr_new.png')} resizeMode={'contain'} />
                        </View>
					</TouchableOpacity>
                </View>
				<View style={styles.cellAddress}>
					<Text style={styles.cellAddressText} numberOfLines={3}>
						收货地址：{storehouseName} {address} {adminName} {phone}
					</Text>
                </View>
				<ListView
                    style={styles.listContainer}
                    dataSource={this.dataSource.cloneWithRows(initialRes)}
                    renderRow={this._renderRow}
                    enableEmptySections={true}
                />
				{this.state.showPicker ? this._picker() : null}
            </View>
		);
	}
}

let {width, height} = Dimensions.get('window');
const styles = StyleSheet.create({
    container: {
        flex: 1,
		backgroundColor: 'white',
    },
	cell0: {
		width: width,
		height: 50,
		backgroundColor: 'white',
		flexDirection: 'row',
		borderBottomWidth: 1,
		borderBottomColor: 'black',
		alignItems: 'center',
	},

	numberName: {
		backgroundColor: 'transparent',
		fontSize:15,
		alignItems: 'center',
		textAlign: 'left',
		marginLeft: 10,
	},
	numberInputText:{
		width: width - 150,
		height: 40,
		backgroundColor:'transparent',
		fontSize:15,
		marginLeft: 5,
		borderWidth: 1,
		borderColor: '#CCC',
		borderRadius: 4,
		marginTop: 5,
        paddingLeft:10,
	},
	pickerView: {
		width: width - 150,
		height: 40,
		backgroundColor:'transparent',
		marginLeft: 5,
		borderWidth: 1,
		borderColor: '#CCC',
		borderRadius: 4,
		justifyContent: 'center',
        paddingLeft:10,
	},
	pickerText: {

	},
	cameraView: {
		width: 30,
		height: 30,
		backgroundColor: 'transparent',
		marginLeft: 10,
	},
    camera: {
		width: 30,
		height: 30,
		backgroundColor: 'transparent',
	},
	cellAddress: {
		width: width,
		height: 60,
		backgroundColor: 'white',
		alignItems: 'center',
		justifyContent: 'center',
	},
	cellAddressText: {
		width: width - 20,
		backgroundColor: 'white',
		fontSize:15,
        alignItems: 'center',
		textAlign: 'left',
	},
	listContainer: {
        flex: 1,
    },
    pickerContainer: {
        flex: 1,
        flexDirection: 'column',
        top: 0,
        left: 0,
        width: width,
        height: height ,
        position: 'absolute',
        backgroundColor: 'transparent',
    },
    pickerSpaceContainer: {
        width: width,
        height: height - 400 ,
        backgroundColor: 'transparent',
    },
    pickerSubContainer: {
        flex: 1,
        flexDirection: 'column',
        bottom: 0,
        width: width,
        height: 400 ,
        backgroundColor: 'white',
    },
});