/* 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 { TouchableHighlight } from "react-native-gesture-handler";
import { withNavigation } from "@react-navigation/compat";
import { SCREEN_HEIGHT, SCREEN_WIDTH } from "../common/Constants";
import Icon from "react-native-vector-icons/FontAwesome5";
import { PrimaryButton } from "../common/ThemedComponents";
import CustomSwitch from "../common/Switch";
import {
  setI18nConfig,
  translate,
} from "react-native-digitcamera/src/common/localize/i18n";
import Database from "../../../../Components/common/Database";

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

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

  //Change langaguge
  const onSelectSwitch = (index) => {
    //lang selection
    if (index == 1) {
      selectedLang = "hn";
    } else {
      selectedLang = "en";
    }
    console.log("INDEX", index);
    Database.init();
    realm.write(() => {
      realm.delete(realm.objects("SelectedLang"));
      realm.create("SelectedLang", {
        PreferredLanguage: selectedLang,
      });
    });
    setI18nConfig();
    langChange();
  };
  return (
    <View style={styles.main}>
      <View style={styles.HeaderView}>
        {/* Left Action */}
        <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}>{"PI Inspection"}</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>
      </View>
    </View>
  );
};

export default withNavigation(Header);

const styles = StyleSheet.create({
  main: {
    backgroundColor: "#FFFFFF",
  },
  HeaderView: {
    height: 70,
    marginRight: 16,
    marginLeft: 16,
    marginTop: 16,
    flexDirection: "row",
  },
  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",
  },
});
