import React, {Fragment} from 'react';
import { StyleSheet, View, Text } from 'react-native';

import {
  createInstance,
  OptimizelyProvider,
  OptimizelyFeature,
  enums,
  setLogger,
} from '@optimizely/react-sdk'

// Provide Custom Logger
setLogger({
  log: function(level, message) {
    var LOG_LEVEL = enums.LOG_LEVEL
    switch (level) {
      case LOG_LEVEL.DEBUG:
        console.log(message);
        break

      case LOG_LEVEL.INFO:
        console.info(message);
        break

      case LOG_LEVEL.WARNING:
        console.warn(message);
        break

      case LOG_LEVEL.ERROR:
        console.warn(message); // Note: Use console.warn instead of console.error
        break
    }
  }
});

const optimizely = createInstance({
  sdkKey: 'CioLPpsSREvaDTzRDVAUpQ',
})

const App = () => {
  return (
    <OptimizelyProvider
      optimizely={optimizely}
      user={{
        id: 'user123',
        attributes: {
          'customerId': 123,
          'isVip': true,
        }
      }}
    >
      <View style={styles.center}>
        <Text>Example Application</Text>
        <OptimizelyFeature feature="hello_world">
          {(isEnabled) => (
            isEnabled
            ? (<Text> You got the hello_world feature! </Text>)
            : (<Text> You did not get the feature </Text>)
          )}
        </OptimizelyFeature>
      </View>
    </OptimizelyProvider>
  );
};

const styles = StyleSheet.create({
  center: {
    height: '100%',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;