import { type CSSProperties, useState } from "react";

import { cn } from "~/lib/utils";

export function PanelAnimationsPreview({ durationMs }: { durationMs: number }) {
  const [panelsOpen, setPanelsOpen] = useState(true);
  const transitionClass =
    "transition-[width,height,border-width] [transition-duration:var(--preview-duration)] ease-out motion-reduce:transition-none";

  return (
    <button
      type="button"
      aria-label="Replay panel animation preview"
      className="flex h-10 w-full cursor-pointer overflow-hidden rounded-lg border border-border bg-background p-1 shadow-xs/5 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background"
      onClick={() => setPanelsOpen((open) => !open)}
      style={{ "--preview-duration": `${durationMs}ms` } as CSSProperties}
    >
      <span
        aria-hidden
        className={cn(
          "h-full shrink-0 overflow-hidden rounded-md bg-sidebar",
          transitionClass,
          panelsOpen ? "w-4" : "w-0",
        )}
      />
      <span aria-hidden className="flex min-w-0 flex-1 flex-col px-1">
        <span className="flex min-h-0 flex-1 flex-col gap-1 pt-1">
          <span className="h-0.5 w-full rounded-full bg-muted-foreground/25" />
          <span className="h-0.5 w-4/5 rounded-full bg-muted-foreground/20" />
          <span className="h-0.5 w-3/5 rounded-full bg-muted-foreground/15" />
        </span>
        <span
          className={cn(
            "flex shrink-0 items-center overflow-hidden bg-foreground/5 px-2",
            transitionClass,
            panelsOpen ? "h-2 border-t border-border/70" : "h-0 border-t-0",
          )}
        >
          <span className="h-px w-2/3 rounded-full bg-muted-foreground/25" />
        </span>
      </span>
      <span
        aria-hidden
        className={cn(
          "h-full shrink-0 overflow-hidden rounded-md bg-muted",
          transitionClass,
          panelsOpen ? "w-5" : "w-0",
        )}
      />
    </button>
  );
}