"use client";

import cx from "classnames";
import React from "react";

import { useStatic } from "../../utils/hooks";

import {
  buildCountdownConfig,
  defaultCountdownLabels,
  getAriaLive,
  getLabelText,
  normalizeUnits,
} from "./Countdown.react";
import type {
  CountdownConfig,
  CountdownLabels,
  CountdownUnit,
} from "./Countdown.static";
import CountdownStatic, { countdownUnits } from "./Countdown.static";
import {
  ATTR_COUNTDOWN,
  ATTR_COUNTDOWN_CONFIG,
  ATTR_COUNTDOWN_UNIT,
  CLASS_ANNOUNCEMENT,
  CLASS_BOTTOM,
  CLASS_CARD,
  CLASS_LABEL,
  CLASS_LEAF_BACK,
  CLASS_LEAF_FRONT,
  CLASS_ROOT,
  CLASS_TOP,
  CLASS_UNIT,
  CLASS_VALUE,
} from "./constants";

export interface CountdownProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
  labels?: CountdownLabels;
  targetDate: string;
  units?: CountdownUnit[];
}

const Countdown: React.FC<CountdownProps> = ({
  className,
  labels,
  targetDate,
  units = [...countdownUnits],
  ...other
}) => {
  const normalizedUnits = normalizeUnits(units);
  const config: CountdownConfig = buildCountdownConfig(
    targetDate,
    normalizedUnits,
    labels,
  );

  const [elementRef] = useStatic(CountdownStatic, config);

  return (
    <div
      className={cx(CLASS_ROOT, className)}
      {...{ [ATTR_COUNTDOWN]: "true" }}
      {...{ [ATTR_COUNTDOWN_CONFIG]: JSON.stringify(config) }}
      ref={elementRef}
      role="timer"
      aria-live={getAriaLive(normalizedUnits)}
      aria-atomic="true"
      {...other}
    >
      <span className={`sr-only ${CLASS_ANNOUNCEMENT}`} />
      {normalizedUnits.map((unit) => (
        <div
          key={unit}
          className={CLASS_UNIT}
          {...{ [ATTR_COUNTDOWN_UNIT]: unit }}
          aria-hidden="true"
        >
          <div className={CLASS_CARD}>
            <div className={CLASS_TOP}>
              <span className={CLASS_VALUE}>00</span>
            </div>
            <div className={CLASS_LEAF_FRONT}>
              <span className={CLASS_VALUE}>00</span>
            </div>
            <div className={CLASS_LEAF_BACK}>
              <span className={CLASS_VALUE}>00</span>
            </div>
            <div className={CLASS_BOTTOM}>
              <span className={CLASS_VALUE}>00</span>
            </div>
          </div>
          <span className={CLASS_LABEL}>
            {getLabelText(unit, labels, defaultCountdownLabels)}
          </span>
        </div>
      ))}
    </div>
  );
};

Countdown.displayName = "Countdown";

export type { CountdownLabels, CountdownUnit };
export { Countdown, countdownUnits };