import {
  IonButton,
  IonHeader,
  IonIcon,
  IonModal,
  IonToolbar,
} from "@ionic/react";
import { close } from "ionicons/icons";
import { Fragment } from "react";
import "./index.sass";

interface Props {
  isOpen: boolean;
  separator?: boolean;
  onClose?: Function;
  customClass?: string;
  buttonOk?: {
    text: string;
    onClickHandler: Function;
  };
  buttonCancel?: {
    text: string;
    onClickHandler: Function;
    color?: string;
  };
  children?: React.ReactNode;
  customHeader?: React.ReactNode;
}

const ModalAlertComponent: React.FC<Props> = ({
  isOpen,
  onClose,
  buttonOk,
  buttonCancel,
  customClass = "",
  children,
  customHeader,
  separator = false,
}) => {
  return (
    <Fragment>
      <IonModal
        isOpen={isOpen}
        // ÍcssClass={`modal-alert-component ${customClass}`}
        swipeToClose={false}
        backdropDismiss={false}
      >
        <div className="modal-alert-component-content">
          <IonHeader>
            <IonToolbar>
              {!onClose ? null : (
                <div
                  onClick={() => {
                    onClose();
                  }}
                  className="close-button"
                >
                  <IonIcon icon={close}></IonIcon>
                </div>
              )}
            </IonToolbar>
            <div>{customHeader}</div>
          </IonHeader>
          {separator && <div className="separator" />}
          <div className="content">
            <div className="main">{children}</div>
            <div className="buttons">
              {buttonOk ? (
                <IonButton
                  expand="block"
                  onClick={() => buttonOk.onClickHandler()}
                >
                  {buttonOk.text}
                </IonButton>
              ) : null}

              {buttonCancel ? (
                <IonButton
                  expand="block"
                  color={buttonCancel.color || "primary"}
                  onClick={() => buttonCancel.onClickHandler()}
                >
                  {buttonCancel.text}
                </IonButton>
              ) : null}
            </div>
          </div>
        </div>
      </IonModal>
    </Fragment>
  );
};

export default ModalAlertComponent;