import * as React from "react";
import Snackbar from "@mui/material/Snackbar";
import IconButton from "@mui/material/IconButton";
import CloseIcon from "@mui/icons-material/Close";
import { useContext } from "react";
import { DataContext } from "../context/Context";
import MuiAlert, { AlertProps } from "@mui/material/Alert";
import { useJsonForms } from "@jsonforms/react";
import { inputProps } from "../interface/inputfieldProps";

const WarningIcon = (props) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor" // Makes the stroke color inherit from the parent
      strokeWidth="1.9"
      strokeLinecap="round"
      strokeLinejoin="round"
      {...props} // Spread props to allow customization
    >
      <path d="M12 15H12.01M12 12V9M4.98207 19H19.0179C20.5615 19 21.5233 17.3256 20.7455 15.9923L13.7276 3.96153C12.9558 2.63852 11.0442 2.63852 10.2724 3.96153L3.25452 15.9923C2.47675 17.3256 3.43849 19 4.98207 19Z"></path>
    </svg>
  );
};

function Notify(props:inputProps) {
  const {path} = props;
  const ctx = useJsonForms();
  const { setNotify, openNotify, theme,notificationAutoHideDuration } = useContext(DataContext);
  const handleClose = (
    event: React.SyntheticEvent | Event,
    reason?: string
  ) => {
    if(reason === "clickaway") return;
    setNotify({ Fail: false, Success: false, Info: false });
  };

  const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
    props,
    ref
  ) {
    return <MuiAlert elevation={0} ref={ref} variant="filled" {...props} />;
  });

  const action = (
    <React.Fragment>
      <IconButton
        size="small"
        aria-label="close"
        color="inherit"
        onClick={handleClose}
        sx={{
          border: "1.5px solid #ffffff",
          padding: "6px",
          width: "12px",
          height: "12px"
        }}
      >
        <CloseIcon fontSize="small" sx={{width: "10px"}}/>
      </IconButton>
    </React.Fragment>
  );

  return (
    <div>
      <Snackbar
        open={openNotify.Success || false}
        autoHideDuration={notificationAutoHideDuration}
        onClose={handleClose}
        action={action}
        sx={{
          right: `${theme.myTheme.spacing(3)} !important`,
          left: "auto !important",
          bottom: `${theme.myTheme.spacing(5)} !important`
        }}
      >
        <Alert
          onClose={handleClose}
          severity="success"
          sx={{ width: "100%" }}
          action={action}
        >
          {openNotify.SuccessMessage}
        </Alert>
      </Snackbar>
      <Snackbar
        open={openNotify.Fail || false}
        autoHideDuration={notificationAutoHideDuration}
        onClose={handleClose}
        action={action}
        sx={{
          "& .MuiPaper-elevation": {
            boxShadow: "none"
          },
          right: `${theme.myTheme.spacing(3)} !important`,
          left: "auto !important",
          bottom: `${theme.myTheme.spacing(5)} !important`
        }}
      >
        <Alert
          onClose={handleClose}
          severity="error"
          sx={{ width: "100%",
            "& .MuiAlert-action": {
              marginRight: "-10px",
              padding: "0px 0px 0px 16px"
            },
            "& .MuiAlert-icon": {
              padding: "0px",
              width: "26px"
            }
           }}
          action={action}
          icon={<WarningIcon style={{ color: "white", width: "100%", height: "100%" }} />}
        >
          {openNotify.FailMessage}
        </Alert>
      </Snackbar>
      <Snackbar
        open={openNotify.Info || false}
        autoHideDuration={notificationAutoHideDuration}
        onClose={handleClose}
        action={action}
        sx={{
          right: `${theme.myTheme.spacing(3)} !important`,
          left: "auto !important",
          bottom: `${theme.myTheme.spacing(5)} !important`
        }}
      >
        <Alert
          onClose={handleClose}
          severity="info"
          sx={{ width: "100%" }}
          action={action}
        >
          {openNotify.InfoMessage}
        </Alert>
      </Snackbar>
    </div>
  );
}

export default Notify;
