/* eslint-disable prettier/prettier */
import React, { useState, useEffect } from "react";
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  // TouchableNativeFeedback,
  Image,
  StatusBar,
  Button,
  Alert,
  Linking,
} from "react-native";
import { withNavigation } from "@react-navigation/compat";
import Icon from "react-native-vector-icons/FontAwesome5";
import Colors from "react-native-digitcamera/src/common/Colors";
// import CustomSwitch from "../common/Switch";
import {
  setI18nConfig,
  translate,
} from "react-native-digitcamera/src/common/localize/i18n";
// import Database from "../../../../Components/common/DAsyncStorage";

const Header = ({
  homeScreen = true,
  leftActionPress,
  rightActionPress,
  searchBarVisible,
  rightAction,
  progress = 0.5,
  navigation,
  titleValue = null,
  goBackHome,
  hasTitle,
  customTitle,
  shiftTitleToLeft,
  type,
  hideTranslationToggle,
  logoPress = () => {},
  homeNavigation = false,
  currentStep,
  totalSteps,
  onbackPress,
  showSteps = false,
  onlanguagechange,
  hideArrowBackButton = false,
  onLogoutPress,
  isLogoutVisible,
  titleStyle,
}) => {
  const [index, setIndex] = useState("");
  var [selectedLang, SetSelectedLang] = useState("en");
  // var RealmData = Database.get("SelectedLang");
  useEffect(() => {
    console.log("hideArrowBackButton", hideArrowBackButton);
  }, []);
  // const navigateToHome = () => {
  //   navigation.dispatch(
  //     CommonActions.reset({
  //       index: 1,
  //       routes: [
  //         {
  //           name: "BottomNavigation",
  //           state: {
  //             routes: [{ name: "Home" }],
  //           },
  //         },
  //       ],
  //     })
  //   );
  // };

  // logout
  const onLogout = () => {
    onLogoutPress();
  };

  //Go back
  const goback = () => {
    // setIndex(currentStep-1)
    onbackPress();
  };
  //call back func for changing lang on screen
  // const langChange = () => {
  //   onlanguagechange();
  // };
  //START

  //Change langaguge
  const onSelectSwitch = async (index) => {
    //lang selection
    if (index == 1) {
      selectedLang = "hn";
    } else {
      selectedLang = "en";
    }
    console.log("INDEX", index);
    await Database.update("SelectedLang", {
      PreferredLanguage: selectedLang,
    });
    // setI18nConfig();
    // langChange();
  };
  return (
    <View style={styles.main}>
      <View
        style={[
          styles.HeaderView,
          shiftTitleToLeft === true
            ? { justifyContent: "space-between" }
            : null,
        ]}
      >
        {/* Left Action */}
        {shiftTitleToLeft === true ? null : (
          <View style={styles.leftActionView}>
            {hideArrowBackButton ? null : (
              <TouchableOpacity
                onPress={() => {
                  goback();
                }}
              >
                <Icon
                  name="arrow-left"
                  size={30}
                  color="black"
                  style={{ alignSelf: "center" }}
                />
              </TouchableOpacity>
            )}
          </View>
        )}

        {/* App Icon */}
        <View style={styles.appNameView}>
          <View style={styles.appNamesubView}>
            <Text
              style={[
                styles.appNameText,
                shiftTitleToLeft ? { marginLeft: -8 } : null,
              ]}
            >
              {customTitle === undefined ? "Pre Inspection" : customTitle}
            </Text>
            {showSteps ? (
              <Text style={styles.stepText}>
                {translate("STEP ")}
                {currentStep + 1 + "/" + totalSteps}
              </Text>
            ) : null}
          </View>
        </View>

        {/* Lang Toggle */}
        <View style={styles.langToggleView}>
          {/* <CustomSwitch
            roundCorner={true}
            option1={"हिन्दी"}
            option2={"English"}
            selectionColor={"#FFFFFF"}
            selectionTextColor={"#000000"}
            borderColor={"#DDDDDD"}
            unSelectionColor={"#F5F5F5"}
            unSelectionTextColor={"#999999"}
            onSelectSwitch={onSelectSwitch}
            selectionMode={RealmData[0]?.PreferredLanguage == "en" ? 2 : 1}
          ></CustomSwitch> */}
        </View>
        {isLogoutVisible && (
          <TouchableOpacity
            onPress={() => {
              onLogout();
            }}
          >
            <Text style={styles.logoutStyle}>{"Logout"}</Text>
          </TouchableOpacity>
        )}
      </View>
    </View>
  );
};

export default withNavigation(Header);

const styles = StyleSheet.create({
  main: {
    backgroundColor: Colors.white,
  },
  HeaderView: {
    height: 70,
    marginRight: 16,
    marginLeft: 16,
    flexDirection: "row",
    alignItems: "center",
  },
  leftActionView: {
    flex: 0.1,
    justifyContent: "center",
  },
  appNameView: {
    flex: 0.6,
    justifyContent: "center",
  },
  langToggleView: {
    flex: 0.3,
    justifyContent: "center",
  },
  appNameText: {
    fontFamily: "Muli-Black",
    fontSize: 20,
  },
  appNamesubView: {
    fontFamily: "Muli-Black",
    fontSize: 20,
    marginLeft: 16,
  },
  stepText: {
    fontFamily: "Muli-Bold",
    fontSize: 12,
    color: "#999999",
  },
  logoutStyle: {
    fontFamily: "Muli-Bold",
    fontSize: 16,
    alignSelf: "center",
  },
});
