/*
 This file is part of GNU Taler
 (C) 2022 Taler Systems S.A.

 GNU Taler is free software; you can redistribute it and/or modify it under the
 terms of the GNU General Public License as published by the Free Software
 Foundation; either version 3, or (at your option) any later version.

 GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
 WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 A PARTICULAR PURPOSE.  See the GNU General Public License for more details.

 You should have received a copy of the GNU General Public License along with
 GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
 */

import { ComponentChildren, Fragment, h, VNode } from "preact";
import { useState } from "preact/hooks";
import { useTranslationContext } from "../../../web-util/src/index.browser.js";
import {
  ErrorAlert,
  Alert as AlertNotification,
  useAlertContext,
} from "../context/alert.js";
import { Alert } from "../mui/Alert.js";

/**
 *
 * @author sebasjm
 */

function AlertContext({
  context,
  cause,
}: {
  cause: unknown;
  context: undefined | object;
}): VNode {
  const [more, setMore] = useState(false);
  const { i18n } = useTranslationContext();
  if (!more) {
    return (
      <div style={{ display: "flex", justifyContent: "right" }}>
        <a onClick={() => setMore(true)}>
          <i18n.Translate>more info</i18n.Translate>
        </a>
      </div>
    );
  }
  return (
    <pre style={{ overflow: "overlay" }}>
      {JSON.stringify(
        context === undefined ? { cause } : { context, cause },
        undefined,
        2,
      )}
    </pre>
  );
}

export function ErrorAlertView({
  error: alert,
  onClose,
}: {
  error: ErrorAlert;
  onClose?: () => Promise<void>;
}): VNode {
  return (
    <Alert title={alert.message} severity={alert.type} onClose={onClose}>
      <div style={{ display: "flex", flexDirection: "column" }}>
        <div>{alert.description}</div>
        <AlertContext context={alert.context} cause={alert.cause} />
      </div>
    </Alert>
  );
}

export function AlertView({
  alert,
  onClose,
}: {
  alert: AlertNotification;
  onClose?: () => Promise<void>;
}): VNode {
  return (
    <Alert title={alert.message} severity={alert.type} onClose={onClose}>
      <div style={{ display: "flex", flexDirection: "column" }}>
        <div>{alert.description}</div>
      </div>
    </Alert>
  );
}

export function CurrentAlerts(): VNode {
  const { alerts, removeAlert } = useAlertContext();
  if (alerts.length === 0) return <Fragment />;
  return (
    <Wrapper>
      {alerts.map((n, i) => (
        <AlertView key={i} alert={n} onClose={async () => removeAlert(n)} />
      ))}
    </Wrapper>
  );
}

function Wrapper({ children }: { children: ComponentChildren }): VNode {
  return <div style={{ margin: "2em" }}>{children}</div>;
}