/* eslint-disable prettier/prettier */
/* eslint-disable react-native/no-inline-styles */
import React from 'react';
import {
  SafeAreaView,
  ImageBackground,
  Text,
  View,
  //TouchableOpacity,
  StyleSheet,
  ScrollView,
 // Alert,
 BackHandler,
} from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import Orientation from 'react-native-orientation';

class LogBook extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      logbook: [],

    };
  }
  displayData = async () => {

    try {
    const value = await AsyncStorage.getItem('@storage_key');
   // console.log(JSON.parse(value));
    if (value !== null) {
        // We have data!!
     // console.log(JSON.parse(value));
         this.setState({ logbook: JSON.parse(value)});
         console.log(this.state.logbook);
    }
} catch (error) {
    // Error retrieving data
  }
  };

  componentDidMount() {
    Orientation.lockToPortrait();
     BackHandler.addEventListener('hardwareBackPress', this.homeExit);
    this.displayData();
  }

   homeExit = async () => {
    this.props.navigation.navigate('1');
     BackHandler.removeEventListener('hardwareBackPress', this.homeExit);
    //Orientation.lockToPortrait();
  };

  render() {
    return (
      <View style={styles.container}>
        <ImageBackground
          source={require('../img/background.jpg')}
          style={{
            width: '100%',
            height: '100%',
          }}>
          <SafeAreaView>
            <ScrollView
              style={{
                marginTop: 50,
              }}>
                {this.state.logbook && this.state.logbook.map((item, id) => (
                <View
                  key ={id}
                  style={{
                    flexDirection: 'row',
                    paddingLeft: 15,
                    paddingRight: 15,
                    paddingBottom:10,
                    paddingTop:5,
                    backgroundColor: 'white',
                    borderBottomWidth:1,
                  }}>
                  <View style={{alignItems: 'center',marginRight:5}}>
                  <View>
                  <Text style={{color:'black', fontSize: 40,textAlign: 'center'}}>{(item.date !== undefined) ? item.date.split(' ')[0].trim() : ''}</Text>
                  <Text style={{color:'black', fontSize: 15, textAlign: 'center'}}>{(item.date !== undefined) ? item.date.split(' ')[1].trim() : ''}</Text>
                 </View>
                  <View>
                  <Text style={{color:'black', fontSize: 15, textAlign: 'center'}}>{item.day}</Text>
                 </View>
                 </View>
                 <View style={{borderWidth:1, borderColor : 'gray'}}/>
                 <View style={{flexDirection: 'column',marginLeft:5,marginTop:10}}>
                  <Text style={{color:'green', fontSize: 15}}>Correct:{item.correct}</Text>
                  <Text style={{color:'red', fontSize: 15}}>Wrong: {item.wrong}</Text>
                  <Text style={{color:'black', fontSize: 15}}>Timer: {item.timer}</Text>
                  <Text style={{color:'black', fontSize: 15}}>Time: {item.time}</Text>
                 </View>
                </View>
              )).reverse()}
            </ScrollView>
          </SafeAreaView>
        </ImageBackground>
      </View>
    );
  }
}
export default LogBook;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#9001f5',
  },
  menu: {
    marginTop: '3%',
    marginBottom: '2%',
    alignItems: 'center',
    justifyContent: 'center',
    padding: '15%',
    marginLeft: '5%',
    marginRight: '5%',
    borderRadius: 10,
    borderWidth: 2,
    borderColor: 'white',
  },
});
