import React, { Component } from 'react';
import { View, Text, Image, StyleSheet, TouchableOpacity } from 'react-native';
import Error from './win-error.png';

export class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = {
      error: false,
      message: '',
      details: {},
    };
  }
  componentDidCatch(err, errInfo) {
    console.error({ err, errInfo });
    this.setState(() => ({
      error: true,
      message: err.message.split('\n').shift(),
      details: { err, errInfo },
    }));
  }
  render() {
    if (this.state.error) {
      const { message } = this.state;
      return (
        <View style={styles.container}>
          <View style={styles.errorBox}>
            <View style={styles.errorBoxHeader}>
              <Text style={styles.headerText}>{message}</Text>
            </View>
            <View style={styles.body}>
              <Image
                source={Error}
                style={{ resizeMode: 'center', height: 25, width: 25 }}
              />
              <Text style={styles.innerText}>I've made a huge mistake</Text>
            </View>
            <TouchableOpacity>
              <View style={styles.button}>
                <Text style={styles.buttonText}>hide it</Text>
              </View>
            </TouchableOpacity>
          </View>
        </View>
      );
    }
    return this.props.children;
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  errorBox: {
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgb(238, 232, 217)',
    borderTopLeftRadius: 3,
    borderTopRightRadius: 3,
    borderWidth: 2,
    borderColor: 'rgb(14, 90, 227)',
    margin: 10,
    paddingBottom: 20,
  },
  errorBoxHeader: {
    backgroundColor: 'rgb(14, 90, 227)',
    shadowOpacity: 0.75,
    shadowRadius: 5,
    shadowColor: 'white',
    shadowOffset: { height: 0, width: 0 },
    padding: 5,
  },
  headerText: {
    color: 'white',
  },
  innerText: {
    padding: 20,
  },
  body: {
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row',
  },
  button: {
    backgroundColor: 'rgb(250,252,252)',
    borderWidth: 1,
    borderColor: 'rgb(95, 106, 114)',
    padding: 5,
    borderRadius: 3,
  },
});