import { BlurView } from "expo-blur";
import { StyleSheet, View } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";

import { TopChrome } from "@/components/TopChrome";
import { useAppTheme } from "@/contexts/ThemeContext";
import { blurIntensity } from "@/lib/beenvoice-theme";
import {
  TOP_CHROME_PADDING_BOTTOM,
  TOP_CHROME_ROW_HEIGHT,
} from "@/lib/top-chrome-insets";

/** Blurred status-bar chrome with logo + account switcher. */
export function TopChromeBar() {
  const insets = useSafeAreaInsets();
  const { isDark } = useAppTheme();
  const tint = isDark ? "rgba(9, 9, 11, 0.28)" : "rgba(255, 255, 255, 0.32)";

  return (
    <View
      style={[
        styles.host,
        {
          paddingTop: insets.top,
          paddingBottom: TOP_CHROME_PADDING_BOTTOM,
          paddingLeft: insets.left,
          paddingRight: insets.right,
          height: insets.top + TOP_CHROME_ROW_HEIGHT + TOP_CHROME_PADDING_BOTTOM,
        },
      ]}
    >
      <BlurView
        intensity={blurIntensity.chrome}
        tint={isDark ? "dark" : "light"}
        style={StyleSheet.absoluteFill}
      />
      <View
        pointerEvents="none"
        style={[StyleSheet.absoluteFill, { backgroundColor: tint }]}
      />
      <TopChrome />
    </View>
  );
}

const styles = StyleSheet.create({
  host: {
    flexShrink: 0,
    overflow: "hidden",
  },
});