'use strict';

import React, {
    PropTypes,
} from 'react';
import {
    Platform,
    Animated,
    Image,
    StyleSheet,
    Text,
    TouchableOpacity,
    View,
    Dimensions,
    BackAndroid,
} from 'react-native';
import {Actions} from 'react-native-router-flux';
import _backButtonImage from '../../images/home/menu_back1.png';
import MessageIcon from './MessageIcon'

const styles = StyleSheet.create({
    header: {
        backgroundColor: 'transparent',
        paddingTop: 0,
        top: 0,
        ...Platform.select({
            ios: {
                height: 64,
            },
            android: {
                height: 54,
            },
        }),
        right: 0,
        left: 0,
        // borderBottomWidth: 0.5,
        // borderBottomColor: '#828287',
        position: 'absolute',

    },
    backButton: {
        width: 60,
        height: 37,
        position: 'absolute',
        ...Platform.select({
            ios: {
                top: 22,
            },
            android: {
                top: 10,
            },
        }),
        left: 6,
        padding: 8,
        marginTop: 3.5,
        flexDirection: 'row',
    },
    backButtonImage: {
        width: 13,
        height: 21,
    },
    image: {
        width: Dimensions.get('window').width,
        height: (Platform.OS === 'android') ? 50 : 64,
    },

    rightButton: {
        position: 'absolute',
        ...Platform.select({
            ios: {
                top: 22+8,
            },
            android: {
                top: 10+8,
            },
        }),

        right: 15,
    }
});

const propTypes = {

};

const contextTypes = {

};

const defaultProps = {
    backButtonImage: _backButtonImage,
};

class UserNavBar extends React.Component {

    constructor(props) {
        super(props);

        this.renderBackButton = this.renderBackButton.bind(this);
        this.renderRightButton = this.renderRightButton.bind(this);
        this.setAnimationValue = this.setAnimationValue.bind(this);
        this.headerColor = this.headerColor.bind(this);
    }

    componentDidMount() {
        this._listener = this.props.scrollValue.addListener(this.setAnimationValue);
    }

    componentWillUnmount() {

    }

    setAnimationValue({ value, }) {
        if (value <= 2) {
            this.headerView.setNativeProps({
                style: {
                    backgroundColor: this.headerColor(value),
                },
            });

            value = value + 0.1;
            value = value > 1 ? 1 : value;
            this.image.setNativeProps({
                style: {
                    opacity: value,
                },
            });
        }
    }

    //color between rgb(255,255,255) and rgb(0,0,0)
    headerColor(progress) {
        const red = 255 + (0 - 255) * progress;
        const green = 255 + (0 - 255) * progress;
        const blue = 255 + (0 - 255) * progress;
        if (progress > 1) {
            return `rgb(0,0,0)`; //`darkgray`
        } else {
            return `rgba(${red}, ${green}, ${blue}, ${progress})`;
        }
    }

    renderBackButton() {
        let onPress = Actions.pop;
        return (
            <TouchableOpacity
                style={styles.backButton}
                onPress={onPress}
            >
                <Image
                    style={styles.backButtonImage}
                    source={this.props.backButtonImage}
                />
            </TouchableOpacity>
        );
    }

    renderRightButton() {
        if(this.props.hasRightButton) {
            return (
                <MessageIcon
                    extraStyle={styles.rightButton}
                    msgCount={this.props.msgCount}
                    iconTap={this.props.rightButtonClick}
                />);
        } else {
            return null;
        }
    }

    getNavBarBackgroundImage(channel) {
        let img = require('../../images/nav/boy/navbar_bg.png');
        switch (parseInt(channel)) {
            case 1:
            img = require('../../images/nav/boy/navbar_bg.png');
            break;
            case 2:
            img = require('../../images/nav/girl/navbar_bg.png');
            break;
            case 3:
            img = require('../../images/nav/kid/navbar_bg.png');
            break;
            case 4:
            img = require('../../images/nav/lifestyle/navbar_bg.png');
            break;
        }
        return img;
    }

    render() {
        return (
            <Animated.View
                ref={(c) => {
                    this.headerView = c;
                }}
                style={[
                    styles.header,
                ]}
            >
                <Image
                    ref={(c) => {
                        this.image = c;
                    }}
                    source={this.getNavBarBackgroundImage(this.props.channel)}
                    style={[styles.image, {opacity: 0,}]}
                >

                </Image>
                {this.renderBackButton()}
                {this.renderRightButton()}
            </Animated.View>
        );
    }
}

UserNavBar.propTypes = propTypes;
UserNavBar.contextTypes = contextTypes;
UserNavBar.defaultProps = defaultProps;

export default UserNavBar;