'use strict';

import React from 'react';
import ReactNative from 'react-native';

const {
    AppRegistry,
    StyleSheet,
    Image,
    View,
    Dimensions,
    TouchableOpacity,
    Modal,
} = ReactNative;


export default class GuideModal extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <Modal
                visible={this.props.isShowGuide}
                animationType={'none'}
                transparent={true}
                onRequestClose={() => {
                }}>
                <TouchableOpacity activeOpacity={1} style={styles.modalContainer} onPress={() => {
                    this.props.hiddenGuideDialog && this.props.hiddenGuideDialog();
                }}>
                    <Image style={styles.helpImage} resizeMode={'contain'} source={require('../images/guide.png')}/>
                </TouchableOpacity>
            </Modal>
        );
    }
};

let {width, height} = Dimensions.get('window');

let styles = StyleSheet.create({
    modalContainer: {
        flex: 1,
        width: width,
        height: height,
        alignItems: 'flex-end',
        backgroundColor: 'rgba(0, 0, 0, 0.6)',
    },
    helpImage: {
        width: 127,
        height: 120,
        marginTop: 67,
        marginRight: 50
    },
});