import {
  Box,
  Breakpoint,
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  Paper,
  PaperProps,
} from "@mui/material"

import Draggable from "react-draggable"
import { useRef, useState } from "react"
import CloseIcon from "@mui/icons-material/Close"

import { limitValue } from "../utils"
import CodeIcon from "@mui/icons-material/Code"
import CompareArrowsIcon from "@mui/icons-material/CompareArrows"
import FullscreenIcon from "@mui/icons-material/Fullscreen"
import { CustomIcon } from "./CustomIcon"

// export function DraggablePaperComponent(props: PaperProps) {
//   return (
//     <Draggable handle="#draggable-dialog-title" cancel={'[class*="MuiDialogContent-root"]'}>
//       <Paper {...props} />
//     </Draggable>
//   )
// }
export function DraggablePaperComponent(props: PaperProps) {
  const nodeRef = useRef(null)
  return (
    <Draggable nodeRef={nodeRef} handle="#draggable-dialog-title" cancel={'[class*="MuiDialogContent-root"]'}>
      <Paper ref={nodeRef} {...props} />
    </Draggable>
  )
}

const widthItems = [
  ["xs", "最小"],
  ["sm", "较小"],
  ["md", "中等"],
  ["lg", "较大"],
  ["xl", "很大"],
  ["max", "最大"],
  ["full", "全屏"],
] as const

function getWidthIndex(w: string) {
  const idx = widthItems.findIndex(x => x[0] === w)
  return idx === -1 ? 3 : idx
}

type ExtraButtonInfo = {
  handler: () => void
  title: string
}

export function DraggableDialog({
  title,
  onCancel,
  onOk,
  children,
  initialWidth,
  extraButton,
}: {
  title?: string | JSX.Element
  onCancel: () => void
  onOk?: () => void
  children: JSX.Element

  initialWidth?: string
  extraButton?: ExtraButtonInfo[]
}) {
  const [widthIndex, setWidthIndex] = useState(getWidthIndex(initialWidth || ""))
  const maxWidth = widthItems[widthIndex][0]
  const changeWidth = (n: number) => {
    setWidthIndex(old => limitValue(old + n, 0, widthItems.length - 1))
  }

  //  const cName = (props as any).classes.resizable as string;
  return (
    <Dialog
      maxWidth={maxWidth === "full" || maxWidth === "max" ? false : (maxWidth as Breakpoint)}
      open={true}
      fullScreen={maxWidth === "full"}
      fullWidth={true}
      PaperComponent={DraggablePaperComponent}
    >
      <DialogTitle style={{ cursor: "move" }} id="draggable-dialog-title">
        <Box sx={{ display: "flex" }}>
          <Box>{title}</Box>
          <Box sx={{ flexGrow: 1, display: "block" }}></Box>
          <Box>
            {widthIndex > 0 && (
              <CustomIcon color="primary" icon={<CompareArrowsIcon />} handler={() => changeWidth(-1)} tooltip="缩小" />
            )}
            {widthIndex < widthItems.length - 1 && (
              <CustomIcon color="primary" icon={<CodeIcon />} handler={() => changeWidth(1)} tooltip="扩大" />
            )}
            {widthIndex !== widthItems.length - 1 && (
              <CustomIcon
                color="primary"
                icon={<FullscreenIcon />}
                handler={() => changeWidth(widthItems.length)}
                tooltip="全屏"
              />
            )}
            <CustomIcon color="primary" icon={<CloseIcon />} handler={onCancel} tooltip="关闭" />
          </Box>
        </Box>
      </DialogTitle>
      <DialogContent sx={{ display: "flex", flexDirection: "column" }}>{children}</DialogContent>
      <DialogActions>
        {extraButton
          ? extraButton.map(eb => (
              <Button key={eb.title} onClick={eb.handler}>
                {eb.title}
              </Button>
            ))
          : null}

        {onOk ? (
          <Button key="okbtn" onClick={onOk}>
            确定
          </Button>
        ) : null}
      </DialogActions>
    </Dialog>
  )
}