"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { cx } from "@emotion/css";
import { forwardRef, useEffect, useState } from "react";
import { useStyle } from "../../../runtimes/react/use-style";
import { colorToString } from "../../utils/colorToString";
import { useResponsiveStyle } from "../../utils/responsive-style";
const BLOCK_CLASS_NAME = "block";
function Block({ className, ...restOfProps }) {
  return /* @__PURE__ */ jsx(
    "div",
    {
      ...restOfProps,
      className: cx(
        BLOCK_CLASS_NAME,
        useStyle({ display: "block", padding: "0.5em", fontSize: "1em" }),
        className
      )
    }
  );
}
const LABEL_CLASS_NAME = "label";
function Label({ className, ...restOfProps }) {
  return /* @__PURE__ */ jsx(
    "div",
    {
      ...restOfProps,
      className: cx(LABEL_CLASS_NAME, useStyle({ marginTop: "0.25em" }), className)
    }
  );
}
const SEGMENT_CLASS_NAME = "segment";
function Segment({ className, ...restOfProps }) {
  return /* @__PURE__ */ jsx(
    "div",
    {
      ...restOfProps,
      className: cx(SEGMENT_CLASS_NAME, useStyle({ flex: 1, textAlign: "center" }), className)
    }
  );
}
const Container = forwardRef(function Container2({
  className,
  width,
  margin,
  variant,
  size,
  shape,
  gap,
  labelColor,
  numberFont,
  numberColor,
  blockColor,
  labelFont,
  ...restOfProps
}, ref) {
  return /* @__PURE__ */ jsx(
    "div",
    {
      ...restOfProps,
      ref,
      className: cx(
        useStyle({ display: "flex" }),
        width,
        margin,
        useStyle(
          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 } };
            }
          })
        ),
        useStyle({
          [`.${SEGMENT_CLASS_NAME}`]: useResponsiveStyle([gap], ([gap2]) => ({
            margin: `0 ${gap2 == null ? 0 : `${gap2.value / 2}${gap2.unit}`}`,
            "&:first-child": {
              marginLeft: 0
            },
            "&:last-child": {
              marginRight: 0
            }
          }))
        }),
        useStyle({
          [`.${BLOCK_CLASS_NAME}`]: useResponsiveStyle([shape], ([shape2 = "rounded"]) => {
            switch (shape2) {
              case "pill":
                return { borderRadius: 500 };
              case "rounded":
                return { borderRadius: 6 };
              default:
                return { borderRadius: 0 };
            }
          })
        }),
        useStyle({
          [`.${BLOCK_CLASS_NAME}`]: 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: colorToString(numberColor2),
                    background: colorToString(blockColor2)
                  };
                case "filled-split":
                  return {
                    position: "relative",
                    color: 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: colorToString(blockColor2)
                    },
                    "::after": {
                      content: '""',
                      position: "absolute",
                      left: 0,
                      right: 0,
                      top: "calc(50% + 1px)",
                      bottom: 0,
                      borderBottomLeftRadius: "inherit",
                      borderBottomRightRadius: "inherit",
                      background: colorToString(blockColor2)
                    }
                  };
                case "outline":
                  return {
                    fontFamily: `"${numberFont2}"`,
                    color: colorToString(numberColor2),
                    background: "transparent",
                    border: `2px solid ${colorToString(blockColor2)}`
                  };
                case "outline-split":
                  return {
                    position: "relative",
                    fontFamily: `"${numberFont2}"`,
                    color: colorToString(numberColor2),
                    border: `2px solid ${colorToString(blockColor2)}`,
                    "> span": {
                      position: "relative",
                      zIndex: 1
                    },
                    "::before": {
                      content: '""',
                      position: "absolute",
                      top: "50%",
                      left: 0,
                      right: 0,
                      height: 2,
                      marginTop: -1,
                      background: colorToString(blockColor2)
                    }
                  };
                default:
                  return {
                    fontFamily: `"${numberFont2}"`,
                    background: "transparent",
                    color: colorToString(numberColor2),
                    paddingTop: 0,
                    paddingBottom: 0
                  };
              }
            }
          )
        }),
        useStyle({
          [`.${LABEL_CLASS_NAME}`]: useResponsiveStyle(
            [labelColor, labelFont],
            ([
              labelColor2 = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },
              labelFont2 = "sans-serif"
            ]) => ({
              fontFamily: `"${labelFont2}"`,
              color: 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 = 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] = useState(getRemaining(null));
  useEffect(() => {
    setRemaining(getRemaining(date));
    const intervalId = setInterval(() => {
      setRemaining(getRemaining(date));
    }, 1e3);
    return () => clearInterval(intervalId);
  }, [date]);
  return /* @__PURE__ */ jsxs(
    Container,
    {
      ref,
      id,
      width,
      margin,
      variant,
      size,
      shape,
      labelColor,
      labelFont,
      numberColor,
      numberFont,
      blockColor,
      gap,
      children: [
        /* @__PURE__ */ jsxs(Segment, { children: [
          /* @__PURE__ */ jsx(Block, { children: /* @__PURE__ */ jsx("span", { children: days }) }),
          /* @__PURE__ */ jsx(Label, { children: daysLabel == null ? "Days" : daysLabel })
        ] }),
        /* @__PURE__ */ jsxs(Segment, { children: [
          /* @__PURE__ */ jsx(Block, { children: /* @__PURE__ */ jsx("span", { children: hours }) }),
          /* @__PURE__ */ jsx(Label, { children: hoursLabel == null ? "Hours" : hoursLabel })
        ] }),
        /* @__PURE__ */ jsxs(Segment, { children: [
          /* @__PURE__ */ jsx(Block, { children: /* @__PURE__ */ jsx("span", { children: minutes }) }),
          /* @__PURE__ */ jsx(Label, { children: minutesLabel == null ? "Minutes" : minutesLabel })
        ] }),
        /* @__PURE__ */ jsxs(Segment, { children: [
          /* @__PURE__ */ jsx(Block, { children: /* @__PURE__ */ jsx("span", { children: seconds }) }),
          /* @__PURE__ */ jsx(Label, { children: secondsLabel == null ? "Seconds" : secondsLabel })
        ] })
      ]
    }
  );
});
var Countdown_default = Countdown;
export {
  Countdown_default as default
};
//# sourceMappingURL=Countdown.js.map