import { jsxs as g, jsx as s } from "react/jsx-runtime";
import { Component as b } from "react";
import p from "lodash/isUndefined";
import { getColor as u, mergeProps as y } from "../Util/index.js";
import { styled as k } from "../Theme/index.js";
const c = 60, d = 60 * c, m = 24 * d;
function h(e) {
  const n = (/* @__PURE__ */ new Date()).getTime(), t = Math.round((e - n) / 1e3), i = Math.floor(t / m), r = Math.floor(t % m / d), o = Math.floor(t % m % d / c), a = Math.round(t % m % d % c);
  return { days: i, hours: r, minutes: o, seconds: a, done: t <= 0 };
}
function l({ number: e, label: n, length: t = 2 }) {
  let i = e.toString();
  for (; i.length < t; )
    i = `0${i}`;
  const r = i.split("");
  return /* @__PURE__ */ g("span", { className: "num-group", children: [
    /* @__PURE__ */ s("span", { className: "num-items", children: r.map((o, a) => (
      // eslint-disable-next-line react/no-array-index-key
      /* @__PURE__ */ s("strong", { className: "num-item", children: o }, `num-${a}`)
    )) }),
    /* @__PURE__ */ s("span", { className: "num-label", children: n })
  ] });
}
class f extends b {
  constructor(n) {
    const t = Object.assign({}, n);
    p(t.dark) && (t.dark = !0), p(t.style) && (t.style = {}), super(t);
    const i = y(t, f, ["dark", "endTime", "style"]);
    this.state = h(i.endTime), this.timer = void 0;
  }
  componentDidMount() {
    this.timer = setInterval(() => {
      const n = h(this.props.endTime);
      n.done && (clearInterval(this.timer), this.timer = void 0), this.setState(n);
    }, 1e3);
  }
  componentWillUnmount() {
    this.timer && (clearInterval(this.timer), this.timer = void 0);
  }
  render() {
    const { dark: n, endTime: t, ...i } = this.props, { days: r, hours: o, minutes: a, seconds: x } = this.state;
    return /* @__PURE__ */ g(w, { dark: n, ...i, children: [
      /* @__PURE__ */ s(l, { number: r, label: "D" }),
      /* @__PURE__ */ s("span", { className: "num-sep", children: ":" }),
      /* @__PURE__ */ s(l, { number: o, label: "H" }),
      /* @__PURE__ */ s("span", { className: "num-sep", children: ":" }),
      /* @__PURE__ */ s(l, { number: a, label: "M" }),
      /* @__PURE__ */ s("span", { className: "num-sep", children: ":" }),
      /* @__PURE__ */ s(l, { number: x, label: "S" })
    ] });
  }
}
const N = `linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 77%, rgba(0, 0, 0, 0.5))`, w = k("div", { shouldForwardProp: (e) => e !== "dark" })`
  color: ${(e) => u(e)};
  font-size: 50px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;

  .num-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 60px;

    @media (max-width: ${(e) => e.theme.breakpoints.values.md}px) {
      margin: 0 20px;
    }
    @media (max-width: ${(e) => e.theme.breakpoints.values.sm}px) {
      margin: 0;
    }

    .num-items {
      display: flex;
      flex-direction: row;
    }

    .num-item {
      display: inline-block;
      width: 40px;
      height: 60px;
      line-height: 60px;
      background-image: ${(e) => e.dark ? N : "none"};
      text-align: center;

      &:first-of-type {
        margin-right: 10px;
        @media (max-width: ${(e) => e.theme.breakpoints.values.sm}px) {
          margin: 0;
        }
      }
    }

    .num-label {
      margin-top: 20px;
      font-size: 24px;
      color: ${(e) => u(e)};
    }
  }
`;
export {
  f as default
};
