"use client";

import * as React from "react";
import { motion } from "framer-motion";
import { useInViewOnce } from "./useInViewOnce";

const DIGITS = "0110100110010110011010011001011001101001";
const DURATION = 0.95;
const EASE = [0.65, 0, 0.35, 1] as const;

/**
 * BitWipe: reveals its content from left to right behind a narrow column of
 * binary digits, as if the text were being written out bit by bit. The content
 * keeps its place the whole time, so nothing reflows.
 *
 * Visibility is observed on the outer wrapper: the inner element is clipped away
 * completely at first, and a fully clipped element never counts as "in view".
 */
export const BitWipe: React.FC<{
  children: React.ReactNode;
  className?: string;
  delay?: number;
  /** Colour of the digit column: dark on light surfaces, light on dark ones. */
  tone?: "dark" | "light";
}> = ({ children, className = "", delay = 0, tone = "dark" }) => {
  const { ref, seen, still } = useInViewOnce<HTMLDivElement>(0.35);
  const open = seen || still;

  return (
    <div ref={ref} className={`relative ${className}`}>
      <motion.div
        initial={false}
        animate={{
          clipPath: open
            ? "inset(-12% -2% -12% -2%)"
            : "inset(-12% 100% -12% -2%)",
        }}
        transition={
          still ? { duration: 0 } : { duration: DURATION, delay, ease: EASE }
        }
        // Server render and no-JS: content is simply visible.
        style={{ clipPath: "none" }}
      >
        {children}
      </motion.div>
      {seen && !still && (
        <motion.span
          aria-hidden="true"
          className={`pointer-events-none absolute inset-y-0 w-[1.1em] overflow-hidden break-all font-mono text-[11px] leading-[1.05] tracking-normal [writing-mode:vertical-rl] md:text-[13px] ${
            tone === "light" ? "text-white" : "text-slate-900"
          }`}
          initial={{ left: "0%", opacity: 0 }}
          animate={{ left: ["0%", "100%"], opacity: [0, 1, 1, 0] }}
          transition={{
            duration: DURATION,
            delay,
            ease: EASE,
            opacity: { duration: DURATION, delay, times: [0, 0.08, 0.86, 1] },
          }}
        >
          {DIGITS}
        </motion.span>
      )}
    </div>
  );
};