"use strict";
"use client";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var Countdown_exports = {};
__export(Countdown_exports, {
  default: () => Countdown_default
});
module.exports = __toCommonJS(Countdown_exports);
var import_jsx_runtime = require("react/jsx-runtime");
var import_css = require("@emotion/css");
var import_react = require("react");
var import_use_style = require("../../../runtimes/react/use-style");
var import_colorToString = require("../../utils/colorToString");
var import_responsive_style = require("../../utils/responsive-style");
const BLOCK_CLASS_NAME = "block";
function Block({ className, ...restOfProps }) {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    "div",
    {
      ...restOfProps,
      className: (0, import_css.cx)(
        BLOCK_CLASS_NAME,
        (0, import_use_style.useStyle)({ display: "block", padding: "0.5em", fontSize: "1em" }),
        className
      )
    }
  );
}
const LABEL_CLASS_NAME = "label";
function Label({ className, ...restOfProps }) {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    "div",
    {
      ...restOfProps,
      className: (0, import_css.cx)(LABEL_CLASS_NAME, (0, import_use_style.useStyle)({ marginTop: "0.25em" }), className)
    }
  );
}
const SEGMENT_CLASS_NAME = "segment";
function Segment({ className, ...restOfProps }) {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    "div",
    {
      ...restOfProps,
      className: (0, import_css.cx)(SEGMENT_CLASS_NAME, (0, import_use_style.useStyle)({ flex: 1, textAlign: "center" }), className)
    }
  );
}
const Container = (0, import_react.forwardRef)(function Container2({
  className,
  width,
  margin,
  variant,
  size,
  shape,
  gap,
  labelColor,
  numberFont,
  numberColor,
  blockColor,
  labelFont,
  ...restOfProps
}, ref) {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    "div",
    {
      ...restOfProps,
      ref,
      className: (0, import_css.cx)(
        (0, import_use_style.useStyle)({ display: "flex" }),
        width,
        margin,
        (0, import_use_style.useStyle)(
          (0, import_responsive_style.useResponsiveStyle)([size], ([size2 = "medium"]) => {
            switch (size2) {
              case "small":
                return { fontSize: 18, [`.${LABEL_CLASS_NAME}`]: { fontSize: 14 } };
              case "large":
                return { fontSize: 32, [`.${LABEL_CLASS_NAME}`]: { fontSize: 18 } };
              default:
                return { fontSize: 24, [`.${LABEL_CLASS_NAME}`]: { fontSize: 16 } };
            }
          })
        ),
        (0, import_use_style.useStyle)({
          [`.${SEGMENT_CLASS_NAME}`]: (0, import_responsive_style.useResponsiveStyle)([gap], ([gap2]) => ({
            margin: `0 ${gap2 == null ? 0 : `${gap2.value / 2}${gap2.unit}`}`,
            "&:first-child": {
              marginLeft: 0
            },
            "&:last-child": {
              marginRight: 0
            }
          }))
        }),
        (0, import_use_style.useStyle)({
          [`.${BLOCK_CLASS_NAME}`]: (0, import_responsive_style.useResponsiveStyle)([shape], ([shape2 = "rounded"]) => {
            switch (shape2) {
              case "pill":
                return { borderRadius: 500 };
              case "rounded":
                return { borderRadius: 6 };
              default:
                return { borderRadius: 0 };
            }
          })
        }),
        (0, import_use_style.useStyle)({
          [`.${BLOCK_CLASS_NAME}`]: (0, import_responsive_style.useResponsiveStyle)(
            [variant, blockColor, numberColor, numberFont],
            ([
              variant2 = "filled",
              blockColor2 = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },
              numberColor2 = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 },
              numberFont2 = "sans-serif"
            ]) => {
              switch (variant2) {
                case "filled":
                  return {
                    fontFamily: `"${numberFont2}"`,
                    color: (0, import_colorToString.colorToString)(numberColor2),
                    background: (0, import_colorToString.colorToString)(blockColor2)
                  };
                case "filled-split":
                  return {
                    position: "relative",
                    color: (0, import_colorToString.colorToString)(numberColor2),
                    fontFamily: `"${numberFont2}"`,
                    "> span": {
                      position: "relative",
                      zIndex: 1
                    },
                    "::before": {
                      content: '""',
                      position: "absolute",
                      top: 0,
                      left: 0,
                      right: 0,
                      bottom: "calc(50% + 1px)",
                      borderTopLeftRadius: "inherit",
                      borderTopRightRadius: "inherit",
                      background: (0, import_colorToString.colorToString)(blockColor2)
                    },
                    "::after": {
                      content: '""',
                      position: "absolute",
                      left: 0,
                      right: 0,
                      top: "calc(50% + 1px)",
                      bottom: 0,
                      borderBottomLeftRadius: "inherit",
                      borderBottomRightRadius: "inherit",
                      background: (0, import_colorToString.colorToString)(blockColor2)
                    }
                  };
                case "outline":
                  return {
                    fontFamily: `"${numberFont2}"`,
                    color: (0, import_colorToString.colorToString)(numberColor2),
                    background: "transparent",
                    border: `2px solid ${(0, import_colorToString.colorToString)(blockColor2)}`
                  };
                case "outline-split":
                  return {
                    position: "relative",
                    fontFamily: `"${numberFont2}"`,
                    color: (0, import_colorToString.colorToString)(numberColor2),
                    border: `2px solid ${(0, import_colorToString.colorToString)(blockColor2)}`,
                    "> span": {
                      position: "relative",
                      zIndex: 1
                    },
                    "::before": {
                      content: '""',
                      position: "absolute",
                      top: "50%",
                      left: 0,
                      right: 0,
                      height: 2,
                      marginTop: -1,
                      background: (0, import_colorToString.colorToString)(blockColor2)
                    }
                  };
                default:
                  return {
                    fontFamily: `"${numberFont2}"`,
                    background: "transparent",
                    color: (0, import_colorToString.colorToString)(numberColor2),
                    paddingTop: 0,
                    paddingBottom: 0
                  };
              }
            }
          )
        }),
        (0, import_use_style.useStyle)({
          [`.${LABEL_CLASS_NAME}`]: (0, import_responsive_style.useResponsiveStyle)(
            [labelColor, labelFont],
            ([
              labelColor2 = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },
              labelFont2 = "sans-serif"
            ]) => ({
              fontFamily: `"${labelFont2}"`,
              color: (0, import_colorToString.colorToString)(labelColor2)
            })
          )
        }),
        className
      )
    }
  );
});
const getRemaining = (date) => {
  if (date == null)
    return { days: "0", hours: "0", minutes: "0", seconds: "0" };
  const timeDiff = new Date(date).getTime() - Date.now();
  if (timeDiff <= 0)
    return { days: 0, hours: 0, minutes: 0, seconds: 0 };
  let delta = Math.abs(timeDiff) / 1e3;
  const days = Math.floor(delta / 86400);
  delta -= days * 86400;
  const hours = Math.floor(delta / 3600) % 24;
  delta -= hours * 3600;
  const minutes = Math.floor(delta / 60) % 60;
  delta -= minutes * 60;
  const seconds = parseInt(String(delta % 60), 10);
  return {
    days: days.toString(),
    hours: hours.toString(),
    minutes: minutes.toString(),
    seconds: seconds.toString()
  };
};
const Countdown = (0, import_react.forwardRef)(function Countdown2({
  id,
  margin,
  width,
  date,
  variant,
  size,
  shape,
  gap,
  labelColor,
  labelFont,
  numberColor,
  numberFont,
  blockColor,
  daysLabel,
  hoursLabel,
  minutesLabel,
  secondsLabel
}, ref) {
  const [{ days, hours, minutes, seconds }, setRemaining] = (0, import_react.useState)(getRemaining(null));
  (0, import_react.useEffect)(() => {
    setRemaining(getRemaining(date));
    const intervalId = setInterval(() => {
      setRemaining(getRemaining(date));
    }, 1e3);
    return () => clearInterval(intervalId);
  }, [date]);
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
    Container,
    {
      ref,
      id,
      width,
      margin,
      variant,
      size,
      shape,
      labelColor,
      labelFont,
      numberColor,
      numberFont,
      blockColor,
      gap,
      children: [
        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Segment, { children: [
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Block, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: days }) }),
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, { children: daysLabel == null ? "Days" : daysLabel })
        ] }),
        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Segment, { children: [
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Block, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: hours }) }),
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, { children: hoursLabel == null ? "Hours" : hoursLabel })
        ] }),
        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Segment, { children: [
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Block, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: minutes }) }),
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, { children: minutesLabel == null ? "Minutes" : minutesLabel })
        ] }),
        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Segment, { children: [
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Block, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: seconds }) }),
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, { children: secondsLabel == null ? "Seconds" : secondsLabel })
        ] })
      ]
    }
  );
});
var Countdown_default = Countdown;
//# sourceMappingURL=Countdown.js.map