'use strict';

var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var dateFns = require('date-fns');
var dateFnsTz = require('date-fns-tz');
var react = require('@chakra-ui/react');
var icons = require('@chakra-ui/icons');
var RadioGroup = require('../RadioGroup/RadioGroup.cjs');
var Calendar = require('./Calendar.cjs');
var PopoverContent = require('../../Popover/PopoverContent.cjs');
var Popover = require('../../Popover/Popover.cjs');
var Button = require('../../Button/Button.cjs');

const DateTimeInput = ({ onChange, value }) => {
  const [mode, setMode] = React.useState("local");
  const date = React.useMemo(() => {
    return isFinite(value) ? new Date(value) : /* @__PURE__ */ new Date();
  }, [value]);
  const dateTimeLocalized = mode === "local" ? date : dateFnsTz.utcToZonedTime(date, "UTC");
  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { trigger: "click", children: [
    /* @__PURE__ */ jsxRuntime.jsx(react.PopoverTrigger, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.InputGroup, { children: [
      /* @__PURE__ */ jsxRuntime.jsx(
        react.Input,
        {
          readOnly: true,
          value: `${dateFns.format(dateTimeLocalized, "dd.MM.yyyy HH:mm:ss")} (${mode === "local" ? "Local" : "UTC"})`
        }
      ),
      /* @__PURE__ */ jsxRuntime.jsx(react.InputRightElement, { children: /* @__PURE__ */ jsxRuntime.jsx(icons.CalendarIcon, { color: "gray.500" }) })
    ] }) }),
    /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { gap: 2, flexDirection: "column", p: 2, children: [
      /* @__PURE__ */ jsxRuntime.jsx(
        Calendar,
        {
          style: { maxWidth: "100%" },
          mode: "single",
          selected: date,
          onSelect: (e) => {
            if (e) {
              const updatedDate = dateFns.setYear(
                dateFns.setMonth(dateFns.setDate(dateTimeLocalized, e.getDate()), e.getMonth()),
                e.getFullYear()
              );
              onChange(dateFns.getUnixTime(updatedDate) * 1e3);
            }
          },
          initialFocus: true
        }
      ),
      /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { gap: 2, alignItems: "center", children: [
        /* @__PURE__ */ jsxRuntime.jsx(
          react.Input,
          {
            type: "time",
            size: "sm",
            value: dateFns.format(dateTimeLocalized, "HH:mm"),
            onChange: (e) => {
              const [hours, minutes] = e.target.value.split(":").map(Number);
              date.setMinutes(minutes != null ? minutes : 0);
              date.setHours(hours != null ? hours : 0);
              const updated = dateFns.getUnixTime(date) * 1e3;
              onChange(updated);
            }
          }
        ),
        /* @__PURE__ */ jsxRuntime.jsx(
          Button,
          {
            size: "sm",
            onClick: () => {
              onChange(Number(/* @__PURE__ */ new Date()));
            },
            children: "Now"
          }
        )
      ] }),
      /* @__PURE__ */ jsxRuntime.jsx(react.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(
        RadioGroup,
        {
          size: "sm",
          name: "mode",
          value: mode,
          onChange: (value2) => {
            setMode(value2);
          },
          options: [
            {
              label: "Local",
              value: "local"
            },
            {
              label: "UTC",
              value: "utc"
            }
          ]
        }
      ) })
    ] }) })
  ] });
};

module.exports = DateTimeInput;
//# sourceMappingURL=DateTimeInput.cjs.map
