import { StyleManProvider } from 'react-native-styleman';
import { MainComponent } from './MainComponent'; // <-- our root component 
 
// create your theme data here... 
const THEME_DATA = () => ({
    
    DEFAULT_BACKGROUND: 'white',
    
    // typography
    SMALL: 8,
    MEDIUM: 15,
    LARGE: 22,
    // text colors
    PRIMARY: 'blue'
});
 
// then pass the THEME_DATA to StyleManProvider as a prop and pass you root component as its child.
const App = () => {
    return (
        (
            <StyleManProvider theme={THEME_DATA}>
                <MainComponent />
            </StyleManProvider>
        )
    );
};
// later 
// AppRegistry.registerComponent('yourApp', () => App);

// first import `withStyles` higher order component from `react-native-styleman`
import { withStyles } from 'react-native-styleman';
import { View, Text } from 'react-native';
 
// now lets write styles for the MainComponent using the variables created in the theme object.  
const styles = ({ MEDIUM, PRIMARY }) => ({
    // here we are destructuring the object returned by THEME_DATA function 
    // and getting the variables MEDIUM_LARGE and PRIMARY out of it.
       
    container: {
        flex: 1
    },
    text: {
        color: PRIMARY, // using theme here
        fontSize: MEDIUM, // and here too
    }
});
 
// Now lets define out MainComponent  
let MainComponent = ({ styles })=>(
  // here we get our styles in the props.
  // `withStyles` function(mentioned below) auto injects the styles in the props of the component.
    <View style={styles.container}>
        <Text style={styles.text}> Hello World </Text>
    </View>
);
 
// now, lets wire up things together.
MainComponent = withStyles(styles)(MainComponent);
 
export { MainComponent };

 const styles = () => {
    return ({
        container: {
            ...
        },
        text: {
            //more styles...
            fontSize: 22,
            color: 'blue',//default// <---------------| // this value would be overwritten 
                                   //                 | // based on current orientation of 
            '@media': [            //                 | // the device. When the device is in 
              {                    //                 | // landscape mode, it would be overwritten 
                orientation: 'landscape',//           | // to red and to pink in portrait mode
                styles: {          //                 |
                  color: 'red', //--------------------|
                }
              },
              {                    
                orientation: 'portrait',
                platform: 'android',  // we can add more than one constraint 
                styles: {          
                  color: 'pink'
                  
                  // any other styles that we write here would also be merged to the `text` object's style
                  // if the device is an android as well as in portrait mode.
                }
              }
            ] // as you can see `@media` accepts an array with multiple queries. 
              // Styleman would process these queries from top to bottom. 
              // Styles for a query is applied if all the constraints given in it are true 
              // (in that case rest of the queries are not processed)      
        }
    });
};
 
let MainComponent = ({ styles })=>(
    <View style={styles.container}>
        <Text style={styles.text}> Hello World </Text>
    </View>
);
 
// now, lets wire up things together.
MainComponent = withStyles(styles)(MainComponent);
 
export { MainComponent };

const THEME_DATA = function ({
   getRem, 
   getMRem,
   getScreenWidthDP, // -> returns the screen width in DP
}){
 // in arguments, we get these `value processor` generators. Once generated, these functions process values given to them.   
 // we can configure these to get our units
   const rem = getRem(getScreenWidthDP(), 320); // 320 is the width of the screen in the given designs to you by your designer. 
   const moderateScaleFactor = 0.4;  // here we are saying, we want to keep the scaling to 40% of the original value only
   const mrem = getMRem(getScreenWidthDP(), 320, moderateScaleFactor);
 
   return {
       // units function
       rem, // <- passing these functions to our theme object so that we can access these from any stylesheet. 
       mrem,
       
       // typography
       SMALL: rem(8),
       MEDIUM: rem(15),
       LARGE: rem(22),
   };
};
 
// now lets access `mrem` from the theme object
const styles = ({ MEDIUM, mrem })=>{
   return ({
       container: {
           flex: 1
       },
       text: {
           fontSize: mrem(MEDIUM) // lets make the fontSize of this text scale as per the device with.
       }
   });
};
 
let MainComponent = ({ styles })=>(
   <View style={styles.container}>
       <Text style={styles.text}> Hello World </Text>
   </View>
);
 
MainComponent = withStyles(styles)(MainComponent);
 
const App = () => {
   return (
       (
           <StyleManProvider theme={THEME_DATA}>
               <MainComponent />
           </StyleManProvider>
       )
   );
};
 

 
// your original theme data. 
const THEME_DATA = () => ({
    // typography
    SMALL: 8,
    MEDIUM: 15,
    LARGE: 22,
    // text colors
    PRIMARY: 'blue' // change this to red 
});
 
const App = () => {
    return (
        (
            <StyleManProvider theme={THEME_DATA}>
                <MainComponent />
            </StyleManProvider>
        )
    );
};
  
const styles = ({ LARGE, PRIMARY }) => ({       
    container: {
        flex: 1,
    },
    text: {
        color: PRIMARY, // using theme here
        fontSize: LARGE, // and here too
    }
});
 
// the `withStyles` HOC along with styles also passes few helper functions like `setTheme` and `getTheme`   
let MainComponent = ({ styles, setTheme })=>( 
    <View style={styles.container}>
        <Text style={styles.text}> Hello World </Text>
       
        <Button title={"Change Theme"} onPress={() => {
                    setTheme((valProcessors) => {
                        // Get the current system theme. 
                        const baseTheme = THEME_DATA(valProcessors);
                        
                        // update it as per our liking and return it.  
                        return {
                            ...baseTheme,
                            PRIMARY: 'red'
                        }
                    });
                }} />
    </View>
);
 
// now, lets wire up things together.
MainComponent = withStyles(styles)(MainComponent);
 
export { MainComponent };