Version.tsx

import { Button } from "@fluffylabs/shared-ui";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuTrigger,
} from "@fluffylabs/shared-ui";
import { ChevronDown } from "lucide-react";
import { useCallback, useContext, useRef } from "react";
import { Tooltip } from "react-tooltip";
import { CodeSyncContext, type ICodeSyncContext } from "../CodeSyncProvider/CodeSyncProvider";
import { type ILocationContext, LocationContext } from "../LocationProvider/LocationProvider";
import { type IMetadataContext, type IVersionInfo, MetadataContext } from "../MetadataProvider/MetadataProvider";

export function Version() {
  const { metadata } = useContext(MetadataContext) as IMetadataContext;
  const { locationParams, setLocationParams } = useContext(LocationContext) as ILocationContext;
  const { migrateSelection } = useContext(CodeSyncContext) as ICodeSyncContext;
  const versions = [...Object.values(metadata.versions).filter(({ legacy }) => !legacy), metadata.nightly];
  const isNightly = locationParams.version === metadata.nightly.hash;
  const currentVersion = isNightly ? metadata.nightly : metadata.versions[locationParams.version];
  const currentVersionHash = currentVersion.hash;
  const dropdownContentRef = useRef<HTMLDivElement>(null);
  const currentItemRef = useRef<HTMLDivElement>(null);

  const handleVersionSelect = useCallback(
    (newVersion: string) => {
      const { selectionStart, selectionEnd, version } = locationParams;
      if (!selectionStart || !selectionEnd) {
        setLocationParams({ version: newVersion });
      } else {
        migrateSelection({ selectionStart, selectionEnd }, version, newVersion).then((newSelection) => {
          setLocationParams({
            ...locationParams,
            selectionStart: newSelection?.selectionStart ?? selectionStart,
            selectionEnd: newSelection?.selectionEnd ?? selectionEnd,
            version: newVersion,
          });
        });
      }
    },
    [setLocationParams, locationParams, migrateSelection],
  );

  const getCurrentVersionLabel = () => {
    const date = new Date(currentVersion.date);
    const isLatest = currentVersion.hash === metadata.latest;
    let label = isNightly ? "Nightly" : isLatest ? "Latest" : "v";
    if (currentVersion.name && !isNightly) {
      label += `: ${currentVersion.name}`;
    }
    return `${label} ${shortHash(currentVersion.hash)} (${date.toLocaleDateString()})`;
  };

  const handleOpenChange = (open: boolean) => {
    if (open) {
      requestAnimationFrame(() => {
        if (currentItemRef.current && dropdownContentRef.current) {
          currentItemRef.current.scrollIntoView({ block: "center", behavior: "auto" });
        }
      });
    }
  };

  return (
    <div className="flex items-center justify-end gap-2 mx-4">
      {currentVersionHash !== metadata.latest && (
        <span
          data-tooltip-id="version"
          data-tooltip-content="The current version is not the latest"
          data-tooltip-place="top"
          className="text-amber-500 text-2xl mt-[-2px]"
        >
          ⚠
        </span>
      )}
      <DropdownMenu onOpenChange={handleOpenChange}>
        <DropdownMenuTrigger asChild>
          <Button variant="tertiary" forcedColorScheme="dark" className="flex-1 justify-between h-[32px]">
            <span className="px-2">{getCurrentVersionLabel()}</span>
            <ChevronDown className="ml-2 h-5 w-4" />
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent ref={dropdownContentRef} className="max-h-[60vh] overflow-y-auto" forcedColorScheme="dark">
          <DropdownMenuRadioGroup value={currentVersionHash} onValueChange={handleVersionSelect}>
            {versions.map((version) => (
              <DropdownMenuRadioItem
                value={version.hash}
                key={version.hash}
                ref={version.hash === currentVersionHash ? currentItemRef : null}
              >
                <VersionOption version={version} latest={metadata.latest} nightly={metadata.nightly.hash} />
              </DropdownMenuRadioItem>
            ))}
          </DropdownMenuRadioGroup>
        </DropdownMenuContent>
      </DropdownMenu>
      <Tooltip
        id="version"
        style={{ backgroundColor: "oklch(76.9% 0.188 70.08)", zIndex: 1, color: "black", fontSize: "10px" }}
      />
    </div>
  );
}

type VersionOptionProps = { version: IVersionInfo; latest: string; nightly: string };
function VersionOption({ version, latest, nightly }: VersionOptionProps) {
  const date = new Date(version.date);
  const isNightly = version.hash === nightly;
  const isLatest = version.hash === latest;

  let label = isNightly ? "Nightly" : isLatest ? "Latest" : "v";
  if (version.name && !isNightly) {
    label += `: ${version.name}`;
  }

  return (
    <span className="w-full">
      {label} {shortHash(version.hash)} ({date.toLocaleDateString()})
    </span>
  );
}

function shortHash(h: string) {
  return `${h.substring(0, 3)}...${h.substring(h.length - 3)}`;
}