/* eslint-disable prettier/prettier */
import React from 'react';
import {
  SafeAreaView,
  ImageBackground,
  Text,
  View,
  ScrollView,
  BackHandler,
} from 'react-native';
import styles from '../style/styleLogbook';
import AsyncStorage from '@react-native-async-storage/async-storage';
import Orientation from 'react-native-orientation';

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

    };
  }

  displayData = async () => {

    try {
    const value = await AsyncStorage.getItem('@listening_key');
    if (value !== null) {
         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('../media/img/background.jpg')}
          style={styles.imagebackground}>
          <SafeAreaView>
            <ScrollView
              style={styles.scroll}>
                {this.state.logbook && this.state.logbook.map((item, id) => (
                <View
                  key ={id}
                  style={styles.view1}>
                  <View style={styles.datedays}>
                  <View>
                  <Text style={styles.textdate1}>{(item.date !== undefined) ? item.date.split(' ')[0].trim() : ''}</Text>
                  <Text style={styles.textdate2}>{(item.date !== undefined) ? item.date.split(' ')[1].trim() : ''}</Text>
                 </View>
                  <View>
                  <Text style={styles.textday}>{item.day}</Text>
                 </View>
                 </View>
                 <View style={styles.border}/>
                 <View style={styles.details}>
                  <Text style={styles.textcorrect}>Correct:{item.correct}</Text>
                  <Text style={styles.textwrong}>Wrong: {item.wrong}</Text>
                  <Text style={styles.texttime}>Timer: {item.timer}</Text>
                  <Text style={styles.texttime}>Time: {item.time}</Text>
                 </View>
                </View>
              )).reverse()}
            </ScrollView>
          </SafeAreaView>
        </ImageBackground>
      </View>
    );
  }
}
export default LogBookListen;


