'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);
    }

    componentDidMount() {

    }

    componentWillUnmount() {

    }

    renderBackButton() {
        let onPress = this.props.onBack || 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() {
        let interpolatedColor = this.props.scrollValue.interpolate({
            inputRange: [0, 64],
            outputRange:  ['rgba(255, 255, 255, 0)', 'rgba(255, 255, 255, 1)'],
            extrapolate: 'clamp'
        });
        let interpolatedOpacity = this.props.scrollValue.interpolate({
            inputRange: [0, 64],
            outputRange:  [0, 1],
            extrapolate: 'clamp'
        });

        let channel = this.props.channel;

        if (channel == 2 || channel == 3 || channel == 4) {
            interpolatedOpacity = interpolatedOpacity > 0.85 ? 0.85 : interpolatedOpacity;
        }

        if (this.props.useDefault) {
            interpolatedColor = 'rgba(255, 255, 255, 1)';
            interpolatedOpacity = 1;
        }

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

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

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

export default UserNavBar;