'use strict';

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

import TimerMixin from 'react-timer-mixin';

export default class SimilarProductGuider extends Component {

    constructor(props) {
        super(props);

        this.state = {
            isVisible: true,
        };

    }

    componentDidMount() {
        this.timer = TimerMixin.setTimeout(() => {
            this.setState({
                isVisible: false,
            });  
        }, 3000);
    }

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

    render() {
        if (!this.state.isVisible) {
            return null;
        }

        return (
            <TouchableOpacity 
                style={{
                    position: 'absolute',
                    top: 0,
                    width: rowWidth,
                    height: imageHeight,
                }}
                onPress={() => {
                    this.setState({
                        isVisible: false,
                    }); 
                }}
            >   
                <View style={styles.imageContainer} >
                    <Image source={require('../../images/find_resemblance_hand.png')}/>
                    <Image style={styles.word} source={require('../../images/find_resemblance_word.png')}/>
                </View>
            </TouchableOpacity>
        );
    }
}

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

const DEVICE_WIDTH_RATIO = width / 320;
let rowWidth = Math.ceil(137.5 * DEVICE_WIDTH_RATIO);
let rowHeight = Math.ceil(254 * DEVICE_WIDTH_RATIO);

const IMAGE_WIDTH = 145;
const IMAGE_HEIGHT = 193;
const IMAGE_RATIO = IMAGE_HEIGHT / IMAGE_WIDTH;
let imageTop = 14 * DEVICE_WIDTH_RATIO;
let imageHeight = rowWidth * IMAGE_RATIO;

let wordTop = Math.ceil(15 * width / 375);

let styles = StyleSheet.create({
    imageContainer: {
        position: 'absolute',
        top: 0,
        width: rowWidth,
        height: imageHeight,
        backgroundColor: 'black',
        opacity: 0.5,
        justifyContent: 'center',
        alignItems: 'center',
    },
    word: {
        marginTop: wordTop,
    },
    
});