/*
 * Copyright (c) 2020 - present Cloudogu GmbH
 *
 * This program is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3.
 *
 * This program 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 Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program. If not, see https://www.gnu.org/licenses/.
 */

import * as React from "react";
import { FC, ReactNode, useRef, useState } from "react";
import { Button } from "@scm-manager/ui-core";
import Modal from "./Modal";

type ConfirmAlertButton = {
  className?: string;
  label: string;
  isLoading?: boolean;
  onClick?: () => void | null;
  autofocus?: boolean;
  disabled?: boolean;
};

type Props = {
  title: string;
  message?: string;
  buttons: ConfirmAlertButton[];
  close?: () => void;
  children?: ReactNode;
};

const ConfirmAlert: FC<Props> = ({ title, message, buttons, close, children }) => {
  const [showModal, setShowModal] = useState(true);
  const initialFocusButton = useRef<HTMLButtonElement>(null);

  const onClose = () => {
    if (typeof close === "function") {
      close();
    } else {
      setShowModal(false);
    }
  };

  const handleClickButton = (button: ConfirmAlertButton) => {
    if (button.onClick) {
      button.onClick();
    }
    onClose();
  };

  const body = (
    <>
      {message} {children}
    </>
  );

  const footer = (
    <div className="field is-grouped">
      {buttons.map((button, index) => (
        <p className="control" key={index}>
          <Button
            className={button.className}
            isLoading={button.isLoading}
            disabled={button.disabled}
            onClick={() => handleClickButton(button)}
            onKeyDown={(e) => e.key === "Enter" && handleClickButton(button)}
            tabIndex={0}
            ref={button.autofocus ? initialFocusButton : undefined}
          >
            {button.label}
          </Button>
        </p>
      ))}
    </div>
  );

  return (
    <Modal
      title={title}
      closeFunction={onClose}
      body={body}
      active={showModal}
      footer={footer}
      initialFocusRef={initialFocusButton}
    />
  );
};

export default ConfirmAlert;