import React, { Component } from 'react';
import {
    Dimensions
} from 'react-native';
import DeviceInfo from 'react-native-device-info';


import {
    isPortrait,
    isLandscape,
} from './scalign';

class ScalingSize extends Component{
    state = {
        orientation: null,
        devicetype: null,
        width: null,
        inputSize: null,
        scale: null,
        textScale: null
    };

    //Guideline sizes are based on standard ~5" screen mobile device
    guidelineBaseWidth = 350;
    guidelineBaseHeight = 680;



    componentWillMount(){
        //alert(DeviceInfo.isTablet())
        // Event Listener for orientation changes

        Dimensions.addEventListener('change', () => {
            alert('modou')
            this.setState({
               orientation: isPortrait() ? 'portrait' : 'landscape',
               devicetype: DeviceInfo.isTablet() ? 'tablet' : 'phone',
               width: Dimensions.get('window').width,
           });

           if(isPortrait()){
                this.setState({
                    scale:  DeviceInfo.isTablet() ? 315: 279,
                    textScale: DeviceInfo.isTablet() ? 18: 16,
                })
           }else{
                this.setState({
                    scale:  DeviceInfo.isTablet() ? 323 : 306,
                    textScale: DeviceInfo.isTablet() ? 18: 16,
                })
           }
        });


        if(isPortrait()){
            this.setState({
                scale:  DeviceInfo.isTablet() ? 315: 279,
                textScale: DeviceInfo.isTablet() ? 18: 16,
            })
        }else{
            this.setState({
                scale:  DeviceInfo.isTablet() ? 323 : 306,
                textScale: DeviceInfo.isTablet() ? 18: 16,
            })
        }
    }

    scale(size) {
        return Dimensions.get('window').width / this.guidelineBaseWidth * size;
    }

    verticalScale (size) {
        return Dimensions.get('window').height / this.guidelineBaseHeight * size
    }

    moderateScale (size, factor = 0.5) {
       return size + ( this.scale(size) - size ) * factor;
    }

}

export default ScalingSize