import { useEffect, useState } from "react";
import { AccessibilityInfo, useColorScheme } from "react-native";
import { palette, type Role } from "./palette";

/**
 * A role's concrete hex for native props that take plain color strings
 * (the header search bar); everything else uses `color` from theme.ts.
 */
export function useRoleColor(role: Role) {
  const dark = useColorScheme() === "dark";
  const [higher, setHigher] = useState(false);
  useEffect(() => {
    let live = true;
    void AccessibilityInfo.isDarkerSystemColorsEnabled().then((on) => live && setHigher(on));
    const sub = AccessibilityInfo.addEventListener("darkerSystemColorsChanged", setHigher);
    return () => {
      live = false;
      sub.remove();
    };
  }, []);
  const variant = higher ? (dark ? "highContrastDark" : "highContrastLight") : dark ? "dark" : "light";
  return palette[role][variant];
}

export function useSearchBarColors() {
  return {
    textColor: useRoleColor("ink"),
    barTintColor: useRoleColor("fill"),
    hintTextColor: useRoleColor("muted"),
    headerIconColor: useRoleColor("muted"),
    tintColor: useRoleColor("accent"),
  };
}