/*
 * @Author: wuhao930406 1148547900@qq.com
 * @Date: 2023-04-20 10:51:07
 * @LastEditors: wuhao930406 1148547900@qq.com
 * @LastEditTime: 2023-08-14 15:17:32
 * @FilePath: /cs_vsofpm/src/components/DraggableDialog/index.jsx
 * @Description:
 *
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
 */
import { CloseOutlined, SendOutlined } from "@ant-design/icons";
import LoadingButton from "@mui/lab/LoadingButton";
import Button from "@mui/material/Button";
import IconButton from "@mui/material/IconButton";

import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogTitle from "@mui/material/DialogTitle";
import Paper from "@mui/material/Paper";
import Slide from "@mui/material/Slide";
import React from "react";
import Draggable from "react-draggable";

const Transition = React.forwardRef(function Transition(props, ref) {
  return <Slide direction="up" ref={ref} {...props} />;
});

function PaperComponent(props) {
  return (
    <Draggable
      handle="#draggable-dialog-title"
      cancel={'[class*="MuiDialogContent-root"]'}
    >
      <Paper {...props} />
    </Draggable>
  );
}

export default function DraggableDialog({
  children,
  dialogprops,
  handleClose,
  loading,
  formdom,
  maxWidth,
  formRef,
}) {
  const formRefs = formRef ?? React.useRef();

  return (
    <div>
      <Dialog
        PaperComponent={PaperComponent}
        aria-labelledby="draggable-dialog-title"
        TransitionComponent={Transition}
        maxWidth={maxWidth ?? "xs"}
        fullWidth
        {...dialogprops}
        //keepMounted
      >
        <DialogTitle
          style={{
            cursor: "move",
            display: "flex",
            justifyContent: "space-between",
          }}
          id="draggable-dialog-title"
        >
          {dialogprops?.title}

          <IconButton size="small" onClick={handleClose}>
            <CloseOutlined></CloseOutlined>
          </IconButton>
        </DialogTitle>
        <DialogContent>
          {children &&
            React.cloneElement(children, {
              submitter: false,
              formRef: formRefs,
            })}
          {formdom &&
            React.cloneElement(formdom, {
              submitter: false,
              formRef: formRefs,
            })}
        </DialogContent>
        {dialogprops?.footer === false ? null : (
          <DialogActions>
            <Button
              type="reset"
              key="rest"
              onClick={() => {
                formRefs?.current?.resetFields();
              }}
            >
              重置
            </Button>
            <LoadingButton
              type="submit"
              key="submit"
              variant="contained"
              loading={loading}
              loadingPosition="start"
              startIcon={<SendOutlined />}
              disabled={dialogprops?.disabled}
              onClick={() => {
                formRefs?.current?.submit();
              }}
            >
              提交
            </LoadingButton>
          </DialogActions>
        )}
      </Dialog>
    </div>
  );
}