import { ThemedText } from '@/components/themed-text';
import { ThemedView } from '@/components/themed-view';
import { useThemeColor } from '@/hooks/use-theme-color';
import { ActivityIndicator, Pressable, StyleSheet } from "react-native";
import { Back } from "./icons";

type Props = {
  title: string;
  loading: boolean;
  canGoBack: boolean;
  onBack: () => void;
};

export default function Header({ title, loading, canGoBack, onBack }: Props) {
  let iconColor = useThemeColor({}, 'icon');
  let iconColorDisabled = useThemeColor({}, 'iconDisabled');
  if (!canGoBack)
     iconColor = iconColorDisabled;

  return (
    <ThemedView style={styles.container}>
      <Pressable
        onPress={onBack}
        disabled={!canGoBack}
        style={styles.back}
      >
        <ThemedView style={styles.backText}>
          <Back size={24} color={iconColor} />
        </ThemedView>
      </Pressable>

      <ThemedText numberOfLines={1} style={styles.title}>
        {title || " "}
      </ThemedText>

      <ThemedView style={styles.right}>
        {loading && <ActivityIndicator size="small" />}
      </ThemedView>
    </ThemedView>
  );
}

const styles = StyleSheet.create({
  container: {
    height: 56,
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: 12,
    borderBottomWidth: 1,    
  },
  back: {
    width: 40,
    justifyContent: "center",
    alignItems: "center",
  },
  backText: { fontSize: 20 },
  disabled: { opacity: 0.3 },
  title: {
    flex: 1,
    fontSize: 16,
    fontWeight: "600",
  },
  right: {
    width: 40,
    alignItems: "center",
  },
});