"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
module.exports = DateRangePicker;
var _jsxRuntime = require("react/jsx-runtime");
var _react = require("react");
var _material = require("@mui/material");
var _iconsMaterial = require("@mui/icons-material");
var _context = require("@arcblock/ux/lib/Locale/context");
var _label = _interopRequireDefault(require("./label"));
var _util = require("../libs/util");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function DatePickerContent({
  tempValue,
  setTempValue,
  handleCancel,
  handleApply,
  handleClear
}) {
  const {
    t
  } = (0, _context.useLocaleContext)();
  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
    sx: {
      p: 2,
      minWidth: 320
    },
    children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
      spacing: 2,
      children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
          children: t("common.startDate")
        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TextField, {
          type: "date",
          value: tempValue.startDate,
          onChange: e => setTempValue(prev => ({
            ...prev,
            startDate: e.target.value
          })),
          size: "small",
          fullWidth: true,
          slotProps: {
            inputLabel: {
              shrink: true
            }
          }
        })]
      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
          children: t("common.endDate")
        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TextField, {
          type: "date",
          value: tempValue.endDate,
          onChange: e => setTempValue(prev => ({
            ...prev,
            endDate: e.target.value
          })),
          size: "small",
          fullWidth: true,
          slotProps: {
            inputLabel: {
              shrink: true
            }
          }
        })]
      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
        direction: "row",
        spacing: 1,
        sx: {
          justifyContent: "space-between"
        },
        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
          variant: "text",
          onClick: handleClear,
          size: "small",
          color: "secondary",
          sx: {
            px: 0.5,
            minWidth: 0
          },
          children: t("common.clear")
        }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
          direction: "row",
          spacing: 1,
          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
            variant: "outlined",
            onClick: handleCancel,
            size: "small",
            children: t("common.cancel")
          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
            variant: "contained",
            onClick: handleApply,
            size: "small",
            children: t("common.confirm")
          })]
        })]
      })]
    })
  });
}
const DateFormat = "YYYY-MM-DD";
function DateRangePicker({
  value,
  onChange,
  label = "",
  size = "small",
  fullWidth = false,
  disabled = false
}) {
  const theme = (0, _material.useTheme)();
  const isMobile = (0, _material.useMediaQuery)(theme.breakpoints.down("sm"));
  const [open, setOpen] = (0, _react.useState)(false);
  const {
    t,
    locale
  } = (0, _context.useLocaleContext)();
  const [tempValue, setTempValue] = (0, _react.useState)({
    startDate: value.start ? (0, _util.formatToDate)(value.start * 1e3, locale, DateFormat) : "",
    endDate: value.end ? (0, _util.formatToDate)(value.end * 1e3, locale, DateFormat) : ""
  });
  const anchorRef = (0, _react.useRef)(null);
  const formatDisplayValue = (startUnix, endUnix) => {
    if (!startUnix || !endUnix) return t("common.selectTimeRange");
    const start = (0, _util.formatToDate)(startUnix * 1e3, locale, DateFormat);
    const end = (0, _util.formatToDate)(endUnix * 1e3, locale, DateFormat);
    return `${start} ~ ${end}`;
  };
  const handleOpen = () => {
    if (disabled) return;
    setTempValue({
      startDate: value.start ? (0, _util.formatToDate)(value.start * 1e3, locale, DateFormat) : "",
      endDate: value.end ? (0, _util.formatToDate)(value.end * 1e3, locale, DateFormat) : ""
    });
    setOpen(true);
  };
  const handleClose = () => {
    setOpen(false);
  };
  const handleApply = () => {
    const unixValue = {
      start: tempValue.startDate ? Math.floor((/* @__PURE__ */new Date(`${tempValue.startDate}T00:00:00`)).getTime() / 1e3) : 0,
      end: tempValue.endDate ? Math.floor((/* @__PURE__ */new Date(`${tempValue.endDate}T23:59:59`)).getTime() / 1e3) : 0
    };
    onChange(unixValue);
    setOpen(false);
  };
  const handleCancel = () => {
    setTempValue({
      startDate: value.start ? (0, _util.formatToDate)(value.start * 1e3, locale, DateFormat) : "",
      endDate: value.end ? (0, _util.formatToDate)(value.end * 1e3, locale, DateFormat) : ""
    });
    setOpen(false);
  };
  const handleClear = () => {
    const emptyValue = {
      start: void 0,
      end: void 0
    };
    onChange(emptyValue);
    setTempValue({
      startDate: "",
      endDate: ""
    });
    setOpen(false);
  };
  const hasValue = !!value.start && !!value.end;
  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TextField, {
      ref: anchorRef,
      label,
      value: formatDisplayValue(value.start, value.end),
      size,
      fullWidth,
      disabled,
      sx: {
        "& .MuiInputBase-input": {
          cursor: disabled ? "default" : "pointer"
        }
      },
      onClick: handleOpen,
      placeholder: t("common.selectTimeRange"),
      slotProps: {
        input: {
          readOnly: true,
          startAdornment: /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.DateRange, {
            fontSize: "small",
            sx: {
              mr: 1,
              color: "text.secondary"
            }
          }),
          endAdornment: hasValue && !disabled && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.IconButton, {
            size: "small",
            onClick: e => {
              e.stopPropagation();
              handleClear();
            },
            sx: {
              color: "text.secondary",
              "&:hover": {
                color: "text.primary"
              }
            },
            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.Clear, {
              fontSize: "small"
            })
          })
        },
        inputLabel: {
          shrink: true
        }
      }
    }), !isMobile && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Popover, {
      open,
      anchorEl: anchorRef.current,
      onClose: handleClose,
      anchorOrigin: {
        vertical: "bottom",
        horizontal: "left"
      },
      transformOrigin: {
        vertical: "top",
        horizontal: "left"
      },
      sx: {
        "& .MuiPaper-root": {
          boxShadow: theme.shadows[8],
          border: `1px solid ${theme.palette.divider}`
        }
      },
      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(DatePickerContent, {
        tempValue,
        setTempValue,
        handleCancel,
        handleApply,
        handleClear
      })
    }), isMobile && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Dialog, {
      open,
      onClose: handleClose,
      fullWidth: true,
      maxWidth: "sm",
      PaperProps: {
        sx: {
          m: 1,
          maxHeight: "calc(100% - 64px)"
        }
      },
      children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.DialogTitle, {
        sx: {
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          pb: 1
        },
        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
          variant: "h6",
          children: t("common.selectTimeRange")
        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.IconButton, {
          edge: "end",
          color: "inherit",
          onClick: handleClose,
          "aria-label": "close",
          size: "small",
          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.Close, {})
        })]
      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.DialogContent, {
        sx: {
          pb: 1
        },
        children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
          spacing: 2,
          sx: {
            mt: 1
          },
          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
            children: t("common.startDate")
          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TextField, {
            type: "date",
            value: tempValue.startDate,
            onChange: e => setTempValue(prev => ({
              ...prev,
              startDate: e.target.value
            })),
            size: "small",
            fullWidth: true,
            slotProps: {
              inputLabel: {
                shrink: true
              }
            }
          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
            children: t("common.endDate")
          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TextField, {
            type: "date",
            value: tempValue.endDate,
            onChange: e => setTempValue(prev => ({
              ...prev,
              endDate: e.target.value
            })),
            size: "small",
            fullWidth: true,
            slotProps: {
              inputLabel: {
                shrink: true
              }
            }
          })]
        })
      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.DialogActions, {
        sx: {
          px: 3,
          pb: 2
        },
        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
          onClick: handleCancel,
          color: "inherit",
          children: t("common.cancel")
        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
          onClick: handleApply,
          variant: "contained",
          children: t("common.confirm")
        })]
      })]
    })]
  });
}