'use strict';

import React, {Component} from 'react';
import Immutable, {Map} from 'immutable';
import LoadingIndicator from '../../../common/components/LoadingIndicator';
import Prompt from '../../../coupon/components/coupon/Prompt';

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



export default class AddCoupon extends Component {

    constructor(props) {
        super(props);
        this.textInputChange = this.textInputChange.bind(this);
        this.state = {
            disable: true,
            text: '',
        };
    }

    textInputChange(event) {
        let dis = true;
        if (event.nativeEvent.text) {
            dis = false;
        }
        this.setState({
            disable: dis,
            text: event.nativeEvent.text,
        });
    }

    render() {

        let {resource} = this.props;
        let data = resource?resource.toJS():'';
        let isFetching = data?data.isFetching:false;
        let needShowToast = data?data.showMessage:false;
        let message = data?data.message:false;

        return (
            <View style={styles.container}>
                <View style={styles.contentContainer}>
                    <TextInput
                        multiline={true}
                        autoCapitalize={'none'}
                        clearButtonMode={'always'}
                        placeholder={'输入优惠劵码'}
                        onChange={this.textInputChange}
                        style={styles.textInput}
                        maxLength={50}
                        underlineColorAndroid="transparent"
                    />
                    <TouchableOpacity activeOpacity={1}
                        onPress={() => {
                            if (!this.state.disable) {
                                let dismissKeyboard = require('dismissKeyboard');
                                dismissKeyboard();
                                this.props.onPressOK && this.props.onPressOK(this.state.text)
                            }
                        }}
                    >
                        <View style={{marginTop: 10,marginLeft: 10,width: 70,height: 35 * DEVICE_WIDTH_RATIO,backgroundColor: this.state.disable?'gray':'red',borderRadius: 5,alignItems: 'center',justifyContent: 'center'}}>
                            <Text style={styles.text}>确定</Text>
                        </View>
                    </TouchableOpacity>
                </View>
                {needShowToast ? <Prompt
                    text={message}
                    duration={1000}
                    onPromptHidden={this.props.resetReceiveCouponResult}
                /> : null}
                <LoadingIndicator
                    isVisible={isFetching}
                />
            </View>
        );
    }
}

let {width, height} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 320;

let styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    contentContainer: {
        flexDirection: 'row',
    },
    textInput: {
        width: (width - 100),
        height: 35 * DEVICE_WIDTH_RATIO,
        fontSize: 12 * DEVICE_WIDTH_RATIO,
        padding: 10,
        marginTop: 10,
        marginLeft: 10,
        borderWidth: 1,
		borderColor:'black',
    },
    text: {
        fontSize: 15 * DEVICE_WIDTH_RATIO,
        color: 'white',
	},
});