/* eslint-disable no-console */

"use client";

import type { ErrorInfo, PropsWithChildren } from "react";
import React from "react";

import { Error as ErrorWidget } from "@/app/error";

export class ErrorBoundary extends React.Component<
  PropsWithChildren<{}>,
  {
    hasError: boolean;
    error: any;
  }
> {
  constructor(props: any) {
    super(props);
    // Define a state variable to track whether is an error or not
    this.state = {
      hasError: false,
      error: null,
    };
  }

  static getDerivedStateFromError(error: string) {
    // Update state so the next render will show the fallback UI
    console.log("getDerivedStateFromError", error);
    return {
      hasError: true,
      error,
    };
  }

  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    // You can use your own error logging service here
    console.log("componentDidCatch", { error, errorInfo });
  }

  render() {
    // Check if the error is thrown

    // @ts-ignore
    const { props } = this.props.children;

    if (this.state.hasError) {
      // You can render any custom fallback UI
      return (
        <ErrorWidget
          noHtml
          message={this.state.error}
          clientConfig={props?.clientConfig}
        />
      );
    }

    // Return children components in case of no error

    return this.props.children;
  }
}

export default ErrorBoundary;