'use strict'

import React from 'react';
import PropTypes from 'prop-types';
import ReactNative from 'react-native';
import * as Progress from 'react-native-progress';
import ImmutablePropTypes from 'react-immutable-proptypes';

const {
    View,
    Image,
    Text,
    TouchableOpacity,
    StyleSheet,
    Dimensions,
    TouchableHighlight,
    Animated,
    CameraRoll,
} = ReactNative;

export default class UploadProgress extends React.Component {
    static propTypes = {
        uploadState:PropTypes.number,
        progress:PropTypes.number,
        image:PropTypes.string,
        onPressRetry:PropTypes.func,
        onPressDelete:PropTypes.func,
        uploadSuccess:PropTypes.func,
    };

    constructor(props) {
        super(props);
        this.state={
            fadeAnim: new Animated.Value(1),
        };
        this._transparent = this._transparent.bind(this);
    }

    componentDidMount() {

    }

    componentWillUnmount() {
        this.timeout && clearTimeout(this.timer);
        this.interval && clearInterval(this.interval);
    }


    render() {
        let data = this.props.data.toJS();
        let {image,uploadState,progress} = data;
        let {width, height} = Dimensions.get('window');
        let progressBarWidth = 0;
        let tips = '';
        switch (uploadState) {
            case 1:
            {
                // 发布中
                tips = '发布中...';
                progressBarWidth = width - 106 - 15;
            }
            break;

            case 2:
            {
                // 发布成功
                tips = '发布成功';
                progressBarWidth = 0;
                this._transparent();
            }
            break;

            case 3:
            {
                // 发布失败
                tips = '发布失败...';
                progressBarWidth = width - 106 - 45 - 40;
            }
            break;
            default:
        }

        return (
            <Animated.View  style={[styles.container, {opacity: this.state.fadeAnim,}]}>
                <Image
                    style={styles.image}
                    defaultSource={require('../../images/home/font.png')}
                    source={{uri: image}}/>
                <Text style={styles.tips}>
                    {tips}
                </Text>

                <Progress.Bar
                    progress={progress}
                    width={progressBarWidth}
                    color={'black'}
                    unfilledColor={'#e0e0e0'}
                    borderWidth={0}
                    style={styles.bar}
                     />
                {this._renderButton(uploadState)}
            </Animated.View>
        );
    }

    _transparent() {
        setTimeout(()=>{

            this.state.fadeAnim.addListener(event=>{
                if (event.value == 0) {
                    this.props.uploadSuccess&&this.props.uploadSuccess();
                }
            });
            Animated.timing(
                this.state.fadeAnim,
                {toValue: 0},
            ).start();

        }, 2000);
    }

    _renderButton(uploadState) {
        //根据上传状态不同返回不同按钮
        if (uploadState == 3) {
            return(
                <View style={{flexDirection:'row', width:55,justifyContent:'space-between',marginLeft:15,}}>

                    <TouchableHighlight
                        underlayColor={'transparent'}
                        onPress={() => {
                            this.props.onPressRetry && this.props.onPressRetry();
                        }}
                    >
                        <Image
                            source={require('../../images/home/retry.png')}
                            style={{width:20,height:20, resizeMode: Image.resizeMode.contain}}
                        />

                    </TouchableHighlight>

                    <TouchableHighlight
                        underlayColor={'transparent'}
                        onPress={() => {
                            this.props.onPressDelete && this.props.onPressDelete();
                        }}
                    >
                        <Image source={require('../../images/home/unselected.png')}/>
                    </TouchableHighlight>
                </View>
            );
        } else if(uploadState == 2) {
            return (
                <Image
                    style={styles.complete}
                    source={require('../../images/home/ok.png')}/>
            );
        }
    }
}

let {width, height} = Dimensions.get('window');
let styles = StyleSheet.create({
    container: {
        // flex:1,
        flexDirection: 'row',
        height: 40,
        backgroundColor: 'white',
        alignItems: 'center',
    },

    tips: {
        fontSize: 11,
        marginRight: 15,
        fontFamily: 'Helvetica Light',
    },

    image: {
        width: 30,
        height: 30,
        margin:5,
    },

    bar: {
        height: 1,
    },

    complete: {
        marginLeft: width-15-20-95,
    },
});