import styles from "../styles/exos/Alert.module.scss";
import { HiOutlineTrash } from "react-icons/hi";
import { AlertType, useAlert } from "../context/alert.context.js";
import { colors, parseClassName } from "../utils/utils.js";
import { css, Global, keyframes } from "@emotion/react";
import chroma from "chroma-js";


function Alert({ alert, onClose }) {
  const alertTypesClasses = {
    [AlertType.Warning]: styles["alert-warning"],
  };
  const alertTypeIcons = {
    [AlertType.Warning]: <HiOutlineTrash />,
  };
  const colorClose = chroma("#0D0221");
  const colorValid = chroma(colors.red);
  return (
    <>
      <div
        className={parseClassName([
          styles.modal,
          alert.active ? styles.visible : "",
          styles["md-effect"],
        ])}
      >
        <div className={styles["md-content"]}>
          <div
            className={parseClassName([
              alertTypesClasses[alert.type],
              styles["alert"],
            ])}
          >
            <div className={styles["alert-title"]}>
              <div className={styles["title-label"]}>
                {alertTypeIcons[alert.type]}
                {alert.title}
              </div>
              <a onClick={onClose}>&times;</a>
            </div>

            <div className={parseClassName([styles["alert-msg"]])}>
              {alert.message}
            </div>

            <div className={styles["alert-options-container"]}>
              <div className={styles["alert-options"]}>
                <button
                  className={styles["validate"]}
                  css={css`
                    background-color: ${colorValid.alpha(0.2).css()};
                    color: ${colorClose.css()};
                    color: ${colorValid.css()};
                    &:hover {
                      background-color: ${colorValid.alpha(0.3).css()};
                    }
                  `}
                  onClick={() => {
                    alert.validate()
                    onClose()
                  }}
                >
                  Oui
                </button>
                <button
                  className={styles["deny"]}
                  onClick={onClose}
                  css={css`
                    background-color: ${colorClose.alpha(0.3).css()};
                    color: ${colorClose.css()};
                    color: white;
                    &:hover {
                      background-color: ${colorClose.alpha(0.6).css()};
                    }
                  `}
                >
                  Non
                </button>
              </div>
            </div>
          </div>{" "}
        </div>
      </div>
      <div
        className={
          styles["alert-overlay"] + (alert.active == false ? " invisible" : "")
        }
        onClick={() => {
          onClose();
        }}
      ></div>
    </>
  );
}

export default Alert;