import { jsxs, jsx } from "react/jsx-runtime";
import { useState } from "react";
import { IconChevronLeft, IconAlertCircle } from "../../icons/index.mjs";
/* empty css                                                                                                                                                                                       */
/* empty css                                                                                                                                                                                        */
/* empty css                                                                                                                                                                                                */
/* empty css                                                                                                                                                                                           */
/* empty css                                                                                                                                                                                           */
import { Typography } from "../../primitive/Typography/index.mjs";
import { Button } from "../../primitive/Button/index.mjs";
import { dayjs } from "../../utils/dayjs.mjs";
import { timeFormatter, formatDuration } from "./helpers.mjs";
import { Box } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/core/Box/Box.mjs";
import { Group } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Group/Group.mjs";
import { Input } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Input/Input.mjs";
import { TimeInput } from "../../node_modules/.pnpm/@mantine_dates@7.15.2_@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hoo_pt67admfm6wboa3vchveewq6zq/node_modules/@mantine/dates/esm/components/TimeInput/TimeInput.mjs";
import { Flex } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Flex/Flex.mjs";
import { DatePicker } from "../../node_modules/.pnpm/@mantine_dates@7.15.2_@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hoo_pt67admfm6wboa3vchveewq6zq/node_modules/@mantine/dates/esm/components/DatePicker/DatePicker.mjs";
import { Alert } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Alert/Alert.mjs";
import { Text } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Text/Text.mjs";
const AbsoluteTimeRangePicker = ({
  value,
  maxDateTime,
  minDateTime,
  maxDuration,
  onChange,
  onCancel,
  onReturnClick,
  dateInputFormat,
  datePickerProps,
  localization
}) => {
  var _a, _b, _c, _d, _e, _f, _g;
  const [start, setStart] = useState(() => value ? new Date(value[0] * 1e3) : null);
  const [end, setEnd] = useState(() => value ? new Date(value[1] * 1e3) : null);
  const startDate = start ? (dateInputFormat == null ? void 0 : dateInputFormat(start)) || dayjs(start).format("MMM D, YYYY") : "-";
  const endDate = end ? (dateInputFormat == null ? void 0 : dateInputFormat(end)) || dayjs(end).format("MMM D, YYYY") : "-";
  const startTime = start ? dayjs(start).format("HH:mm:ss") : "-";
  const endTime = end ? dayjs(end).format("HH:mm:ss") : "-";
  const isRangeComplete = !!start && !!end;
  const startAfterEnd = isRangeComplete && start.valueOf() > end.valueOf();
  const beyondMin = isRangeComplete && minDateTime && start.valueOf() < minDateTime.valueOf();
  const beyondMax = isRangeComplete && maxDateTime && end.valueOf() > maxDateTime.valueOf();
  const beyondDuration = isRangeComplete && !!maxDuration && end.valueOf() - start.valueOf() > maxDuration * 1e3;
  const [displayRangeDate, setDisplayRangeDate] = useState([start, end]);
  const updateRangeDate = (dates) => {
    setDisplayRangeDate(dates);
    const newStart = new Date(dates[0]);
    if (start) {
      newStart.setHours(start.getHours());
      newStart.setMinutes(start.getMinutes());
      newStart.setSeconds(start.getSeconds());
    }
    setStart(newStart);
    let newEnd = new Date(dates[0]);
    if (dates[1]) {
      newEnd = new Date(dates[1]);
    }
    if (end) {
      newEnd.setHours(end.getHours());
      newEnd.setMinutes(end.getMinutes());
      newEnd.setSeconds(end.getSeconds());
    }
    setEnd(newEnd);
  };
  const updateTime = (v, setter) => {
    setter((old) => {
      const d = dayjs(v, "HH:mm:ss").toDate();
      const newD = new Date(old);
      newD.setHours(d.getHours());
      newD.setMinutes(d.getMinutes());
      newD.setSeconds(d.getSeconds());
      return newD;
    });
  };
  const apply = () => onChange == null ? void 0 : onChange({ type: "absolute", value: [dayjs(start).unix(), dayjs(end).unix()] });
  return /* @__PURE__ */ jsxs(Box, { p: "md", w: 280, m: -4, children: [
    /* @__PURE__ */ jsxs(Group, { pb: "xs", mt: -4, onClick: onReturnClick, sx: { cursor: "pointer" }, children: [
      /* @__PURE__ */ jsx(IconChevronLeft, { size: 16 }),
      /* @__PURE__ */ jsx(Typography, { variant: "body-lg", children: (localization == null ? void 0 : localization.back) || "Back" })
    ] }),
    /* @__PURE__ */ jsxs(Group, { gap: 0, pt: 8, justify: "space-between", children: [
      /* @__PURE__ */ jsx(Typography, { variant: "label-sm", children: (localization == null ? void 0 : localization.start) || "Start" }),
      /* @__PURE__ */ jsxs(Group, { gap: 8, children: [
        /* @__PURE__ */ jsx(Input, { w: 116, value: startDate, error: beyondMin || startAfterEnd || beyondDuration }),
        /* @__PURE__ */ jsx(
          TimeInput,
          {
            w: 90,
            withSeconds: true,
            value: startTime,
            onChange: (d) => updateTime(d.currentTarget.value, setStart),
            error: beyondMin || startAfterEnd || beyondDuration
          }
        )
      ] })
    ] }),
    /* @__PURE__ */ jsxs(Group, { gap: 0, pt: 8, justify: "space-between", children: [
      /* @__PURE__ */ jsx(Typography, { variant: "label-sm", children: (localization == null ? void 0 : localization.end) || "End" }),
      /* @__PURE__ */ jsxs(Group, { gap: 8, children: [
        /* @__PURE__ */ jsx(Input, { w: 116, value: endDate, error: beyondMax || startAfterEnd || beyondDuration }),
        /* @__PURE__ */ jsx(
          TimeInput,
          {
            w: 90,
            withSeconds: true,
            value: endTime,
            onChange: (d) => updateTime(d.currentTarget.value, setEnd),
            error: beyondMax || startAfterEnd || beyondDuration
          }
        )
      ] })
    ] }),
    /* @__PURE__ */ jsx(Flex, { justify: "center", pt: 8, children: /* @__PURE__ */ jsx(
      DatePicker,
      {
        ...datePickerProps,
        type: "range",
        value: displayRangeDate,
        onChange: updateRangeDate,
        maxDate: maxDateTime,
        minDate: minDateTime
      }
    ) }),
    (startAfterEnd || beyondMin || beyondMax || beyondDuration) && /* @__PURE__ */ jsxs(Alert, { icon: /* @__PURE__ */ jsx(IconAlertCircle, { size: 16 }), color: "red", pt: 8, children: [
      startAfterEnd && /* @__PURE__ */ jsx(Text, { c: "red", children: ((_a = localization == null ? void 0 : localization.errors) == null ? void 0 : _a.startAfterEnd) || "Please select an end time after the start time." }),
      beyondMin && /* @__PURE__ */ jsx(Text, { c: "red", children: ((_c = (_b = localization == null ? void 0 : localization.errors) == null ? void 0 : _b.beyondMin) == null ? void 0 : _c.call(_b, minDateTime)) || `Please select a start time after ${timeFormatter(minDateTime, null, "MMM D, YYYY HH:mm:ss")}` }),
      beyondMax && /* @__PURE__ */ jsx(Text, { c: "red", children: ((_e = (_d = localization == null ? void 0 : localization.errors) == null ? void 0 : _d.beyondMax) == null ? void 0 : _e.call(_d, maxDateTime)) || `Please select an end time before ${timeFormatter(maxDateTime, null, "MMM D, YYYY HH:mm:ss")}` }),
      beyondDuration && /* @__PURE__ */ jsx(Text, { c: "red", children: ((_g = (_f = localization == null ? void 0 : localization.errors) == null ? void 0 : _f.beyondDuration) == null ? void 0 : _g.call(_f, maxDuration)) || `The selection exceeds the ${formatDuration(maxDuration)} limit, please select a shorter time range.` })
    ] }),
    /* @__PURE__ */ jsxs(Flex, { pt: 8, gap: "xs", justify: "flex-end", align: "flex-start", direction: "row", wrap: "wrap", children: [
      /* @__PURE__ */ jsx(Button, { size: "xs", variant: "default", onClick: onCancel, children: (localization == null ? void 0 : localization.cancel) || "Cancel" }),
      /* @__PURE__ */ jsx(
        Button,
        {
          size: "xs",
          onClick: apply,
          disabled: !start || !end || startAfterEnd || beyondMin || beyondMax || beyondDuration,
          children: (localization == null ? void 0 : localization.apply) || "Apply"
        }
      )
    ] })
  ] });
};
export {
  AbsoluteTimeRangePicker as default
};
