'use strict';

import React, {Component} from 'react'
import {
    StyleSheet,
    View,
    Text,
    Image,
    Dimensions,
    Platform,
    Animated,
} from 'react-native';

import TimerMixin from 'react-timer-mixin';


const initOpacity = 0.8;

export default class Prompt extends Component {

    static propTypes = {
        icon: Image.propTypes.source,
        overlayColor: React.PropTypes.string,
        title: React.PropTypes.string,
        titleColor: React.PropTypes.string,
        titleFontSize: React.PropTypes.number,
        text: React.PropTypes.string,
        textColor: React.PropTypes.string,
        textFontSize: React.PropTypes.number,
        duration: React.PropTypes.number,
        onPromptHidden: React.PropTypes.func,
    };

    static defaultProps = {
        isDismissible: false,
        overlayColor: 'rgba(0,0,0,'+ initOpacity + ')',
        titleColor: '#eeeeee',
        titleFontSize: 15,
        textColor: '#eeeeee',
        textFontSize: 15,
        duration: 2 * 1000, //2s
    };

    constructor(props) {
        super(props);

        this.state = {
            fadeAnim: new Animated.Value(initOpacity),
        };

    }

    componentDidMount() {
        this.timer = TimerMixin.setTimeout(
            () => {
                this.state.fadeAnim.addListener(event => {
                    if (event.value == 0) {
                        this.props.onPromptHidden && this.props.onPromptHidden();
                    }
                });
                Animated.timing(
                    this.state.fadeAnim,
                    {toValue: 0},
                ).start();
            },
            this.props.duration
        );
    }

    componentWillUnmount() {
        TimerMixin.clearTimeout(this.timer);
    }

    render() {
        let customStyles = StyleSheet.create({
            overlay: {
                alignItems: 'center',
                justifyContent: 'center',
                borderRadius: 10,
                backgroundColor: this.props.overlayColor,
            },
            title: {
                // color: this.props.titleColor,
                // fontSize: this.props.titleFontSize,
                marginTop: 10,
                marginLeft: 15,
                marginRight: 15,
                marginBottom: 10,
                width: 30,
                height: 30,
            },
            text: {
                color: this.props.textColor,
                fontSize: this.props.textFontSize,
                maxWidth: width - 30 - 30,
                marginTop: 15,
                marginLeft: 15,
                marginRight: 15,
                marginBottom: 15,
            },
        });
        if (!this.props.icon) {
            if (!this.props.text) {
                return null;
            }
        }

        return (
            <Animated.View style={[styles.container, {opacity: this.state.fadeAnim,}]}>
                <View style={customStyles.overlay}>
                    {this.props.icon ? <Image source={this.props.icon} style={customStyles.title}/> : null}
                    {this.props.text ? <Text style={customStyles.text}>{this.props.text}</Text> : null}
                </View>
            </Animated.View>
        );
    }
}

let {width, height} = Dimensions.get('window');
let navbarHeight = (Platform.OS === 'android') ? 50 : 64;

const styles = StyleSheet.create({
    container: {
        position: 'absolute',
        backgroundColor: 'transparent',
        justifyContent: 'center',
        alignItems: 'center',
        top: -navbarHeight,
        bottom: 0,
        left: 0,
        right: 0,
    },
});