import React, { useState } from "react";
import {
  withStyles,
  WithStyles,
  createStyles,
  IconButton,
  Collapse,
  LinearProgress,
} from "@material-ui/core";
import Alert from "@material-ui/lab/Alert";
import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline";
import CloseIcon from "@material-ui/icons/Close";
import DeleteDialog, { Action } from "../Dialog";

const DeleteButton = ({
  header,
  content,
  onConfirm,
  onSuccess,
  onError,
  classes,
}: DeleteButtonProps) => {
  const [open, setOpen] = useState<boolean>(false);
  const [alertOpen, setAlertOpen] = useState<boolean>(false);
  const [alertText, setAlertText] = useState<string>("");
  const [loading, setLoading] = useState<boolean>(false);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
    setAlertOpen(false);
    setAlertText("");
  };

  const onDelete = async () => {
    setLoading(true);
    try {
      await onConfirm();
      onSuccess?.();
    } catch (error) {
      onError?.();
      setAlertOpen(true);
      setAlertText((error as any)?.message);
    }
    setLoading(false);
  };

  const dialogActions: Action[] = [
    {
      size: "small",
      variant: "outlined",
      color: "secondary",
      text: "Cancel",
      action: handleClose,
    },
    {
      size: "small",
      variant: "outlined",
      color: "primary",
      text: "Yes",
      action: onDelete,
    },
  ];

  return (
    <>
      <IconButton onClick={handleClickOpen}>
        <DeleteOutlineIcon color="primary" />
      </IconButton>
      <DeleteDialog
        open={open}
        onClose={handleClose}
        header={header}
        content={
          <>
            {content}
            {loading && <LinearProgress />}
            <Collapse className={classes.alert} in={alertOpen}>
              <Alert
                severity="error"
                action={
                  <IconButton
                    color="inherit"
                    size="small"
                    onClick={() => {
                      setAlertOpen(false);
                    }}
                  >
                    <CloseIcon fontSize="inherit" />
                  </IconButton>
                }
              >
                {alertText}
              </Alert>
            </Collapse>
          </>
        }
        actions={dialogActions}
      />
    </>
  );
};

const styles = () =>
  createStyles({
    alert: {
      width: "100%",
    },
  });

interface DeleteButtonIncomingProps {
  header?: string;
  content?: JSX.Element | null;
  onConfirm: () => Promise<any>;
  onSuccess?: () => void;
  onError?: () => void;
}

DeleteButton.defaultProps = {
  header: undefined,
  content: null,
  onSuccess: () => {},
  onError: () => {},
};

type DeleteButtonProps = DeleteButtonIncomingProps & WithStyles<typeof styles>;

export default withStyles(styles)(DeleteButton);