/**
 * React Fabric
 * @version 1.0.0
 * @license MIT
 * @copyright 2024 Adarsh Pastakia
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

import { Component, useState } from "react";
import { useTranslation } from "react-i18next";
import { Fragment } from "react/jsx-runtime";
import { useGlobals } from "../../context/context";
import type { ChildrenProp } from "../../types";
import { ErrorIcon } from "./ErrorIcon";

interface ErrorComponentProps {
  error?: string;
  errorElement?: React.ComponentType<{ error?: string }>;
}

const DefaultError = ({ error }: { error?: string }) => {
  const { t } = useTranslation("core");
  return (
    <Fragment>
      <h6>{t("error.title")}</h6>
      <p className="line-clamp-4">{error}</p>
    </Fragment>
  );
};

const ErrorMessage = ({ error, errorElement }: ErrorComponentProps) => {
  const { errorElement: globalError } = useGlobals();
  const EE = errorElement ?? globalError ?? DefaultError;
  return (
    <Fragment>
      <ErrorIcon />
      <div className="fabric-boundaryMessage p-2">
        <EE error={error} />
      </div>
    </Fragment>
  );
};

const ErrorStack = ({ error, stack }: { error?: string; stack: string }) => {
  const [show, setShow] = useState(false);
  console.error(error, {}, stack);
  return (
    <div className="fabric-boundaryDetail overflow-hidden grid">
      <div className="fabric-boundaryLink px-2 py-1 text-xs text-end">
        <span role="link" tabIndex={0} className="link" onClick={() => setShow(!show)} onKeyDown={() => setShow(!show)}>
          {show ? "Hide Detail" : "Show Detail"}
        </span>
      </div>
      {show && (
        <div className="fabric-boundaryStack overflow-auto p-2 text-xs border-t">
          <pre className="whitespace-pre-wrap">{stack}</pre>
        </div>
      )}
    </div>
  );
};

/**
 * Catches JavaScript errors in the child tree, logs them, and displays a fallback UI.
 * It can be used to wrap any component tree to prevent the entire application from crashing due to errors in a specific part of the UI.
 *
 * @example
 * ```tsx
 * <ErrorBoundary errorElement={CustomErrorComponent}>
 *   <MyComponent />
 * </ErrorBoundary>
 * ```
 */
export class ErrorBoundary extends Component<
  {
    /**
     * custom error display
     */
    errorElement?: React.ComponentType<{ error?: string }>;
  } & ChildrenProp,
  { hasError: boolean; error?: string; stack?: AnyObject }
> {
  public static getDerivedStateFromError(error: Error) {
    return { hasError: true, error: error.message, stack: error.stack };
  }

  constructor(props: ErrorComponentProps & ChildrenProp) {
    super(props);
    this.state = { hasError: false };
  }

  public componentDidCatch(error: Error) {
    this.setState({ hasError: true, error: error.message, stack: error.stack });
  }

  render() {
    const env = process.env.NODE_ENV;
    if (this.state.hasError) {
      const { errorElement: E } = this.props;
      // You can render any custom fallback UI
      return (
        <div className="fabric-errorBoundary grid overflow-hidden rounded-capped">
          <ErrorMessage error={this.state.error} errorElement={E} />
          {env === "development" && <ErrorStack error={this.state.error} stack={this.state.stack as string} />}
        </div>
      );
    }

    return this.props.children;
  }
}