import { jsxs, jsx } from 'react/jsx-runtime';
import { useState, useMemo } from 'react';
import { format, setYear, setMonth, setDate, getUnixTime } from 'date-fns';
import { utcToZonedTime } from 'date-fns-tz';
import { PopoverTrigger, InputGroup, Input, InputRightElement, Flex, Box } from '@chakra-ui/react';
import { CalendarIcon } from '@chakra-ui/icons';
import RadioGroup from '../RadioGroup/RadioGroup.js';
import Calendar from './Calendar.js';
import PopoverContent from '../../Popover/PopoverContent.js';
import Popover from '../../Popover/Popover.js';
import Button from '../../Button/Button.js';

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

export { DateTimeInput as default };
//# sourceMappingURL=DateTimeInput.js.map
