import React from "react";
import { StyleSheet } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";

import { useIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";
import CloseButton from "./Buttons/CloseButton";
import BackButton from "./Buttons/BackButton";
import BarTitle from "./BarTitle";

type Props = {
  screenStyles: {
    title_font_color: string;
    title_font_android: string;
    title_font_ios: string;
    title_font_size: string;
    background_color: string;
  };
  barState: NavBarState;
};

const defaultState: NavBarState = {
  backHandler: null,
  closeHandler: null,
  title: "",
};

const BarView = ({ screenStyles, barState = defaultState }: Props) => {
  const isRTL = useIsRTL();

  const style = StyleSheet.create({
    view: {
      flexDirection: "row",
      alignItems: "center",
      backgroundColor: screenStyles.background_color,
    },
    rtlStyle: { transform: [{ scaleX: -1 }] },
  });

  const closeButton = (
    <CloseButton onPress={barState.closeHandler} screenStyles={screenStyles} />
  );

  const backButton = (
    <BackButton onPress={barState.backHandler} screenStyles={screenStyles} />
  );

  return (
    <SafeAreaView
      edges={["top", "left", "right"]}
      style={[style.view, isRTL ? style.rtlStyle : {}]}
      testID="BarView-safeAreaView"
    >
      {backButton}
      <BarTitle title={barState.title} screenStyles={screenStyles} />
      {closeButton}
    </SafeAreaView>
  );
};

export default BarView;