import { Component } from 'react'
import EmptyState from './ui/EmptyState'
import Button from './ui/Button'

// Fängt Fehler beim Aufbau einer Seite ab, damit nicht die ganze Oberfläche verschwindet.
// Wichtigster Fall: Nach einem Deploy fehlt einem alten, noch offenen Tab der Chunk einer lazy geladenen Seite
// (nginx antwortet statt mit der .js-Datei mit der index.html, der Import schlägt fehl). Ohne Boundary räumt React
// dann den gesamten Baum ab (leere Seite); so bleiben Menü und Rahmen stehen und ein Knopf lädt neu.
// resetKey ist der Pfad: ein Seitenwechsel im Menü räumt den Fehler weg. Ein fehlgeschlagener lazy-Import bleibt
// dagegen fehlgeschlagen, bis die Seite neu geladen wird (React merkt sich die abgelehnte Zusage).
export default class RouteErrorBoundary extends Component {
  constructor(props) {
    super(props)
    this.state = { error: null, resetKey: props.resetKey }
  }

  static getDerivedStateFromError(error) {
    return { error }
  }

  static getDerivedStateFromProps(props, state) {
    if (props.resetKey !== state.resetKey) return { error: null, resetKey: props.resetKey }
    return null
  }

  componentDidCatch(error) {
    console.error('Seitenfehler:', error)
  }

  render() {
    if (!this.state.error) return this.props.children
    return (
      <div role="alert">
        <EmptyState
          title="Diese Seite konnte nicht angezeigt werden."
          hint="Vielleicht gibt es seit dem Öffnen dieses Tabs eine neue Version von WOMS. Lade die Seite neu; bleibt der Fehler, wähle im Menü eine andere Seite."
          action={<Button type="button" onClick={() => window.location.reload()}>Seite neu laden</Button>}
        />
      </div>
    )
  }
}