import React, { useState } from "react";
import Database from "../../../../Components/common/Database";

import { StyleSheet, Text, View, TouchableOpacity } from "react-native";
import { SCREEN_WIDTH } from "react-native-digitcamera/src/common/Constants";

const CustomSwitch = ({
  navigation,
  selectionMode,
  roundCorner,
  option1,
  option2,
  onSelectSwitch,
  selectionColor,
  selectionTextColor,
  borderColor,
  unSelectionColor,
  unSelectionTextColor,
}) => {
  const [getSelectionMode, setSelectionMode] = useState(selectionMode);
  const [getRoundCorner, setRoundCorner] = useState(roundCorner);
  let realm = Database.getRealm();
  var RealmData = realm.objects("SelectedLang");

  const updatedSwitchData = (val) => {
    setSelectionMode(val);
    onSelectSwitch(val);
  };

  return (
    <View style={{ flex: 1, justifyContent: "center" }}>
      <View
        style={{
          height: 20,
          width: 90,
          backgroundColor: "white",
          borderRadius: getRoundCorner ? 25 : 0,
          borderWidth: 1,
          borderColor: borderColor,
          flexDirection: "row",
          justifyContent: "flex-start",
        }}
      >
        <TouchableOpacity
          activeOpacity={1}
          onPress={() =>
            updatedSwitchData(
              RealmData[0]?.PreferredLanguage === undefined ||
                RealmData[0]?.PreferredLanguage == "en"
                ? 1
                : 2
            )
          }
          style={{
            backgroundColor:
              getSelectionMode == 1 ? selectionColor : unSelectionColor,
            borderRadius: getRoundCorner ? 25 : 0,
            justifyContent: "center",
            alignItems: "center",
            borderColor: "#999999",
            // borderRightWidth: getSelectionMode == 1 ? 1 : 0,
            borderWidth: 1,
          }}
        >
          <Text
            style={{
              color:
                getSelectionMode == 1
                  ? selectionTextColor
                  : unSelectionTextColor,
              fontSize: 12,
              fontFamily: "Muli-SemiBold",
              marginLeft: 4,
              marginRight: 4,
              textAlign: "center",
            }}
          >
            {option1}
          </Text>
        </TouchableOpacity>
        <TouchableOpacity
          TouchableOpacity
          activeOpacity={1}
          onPress={() =>
            updatedSwitchData(
              (RealmData[0]?.PreferredLanguage === undefined ||
                RealmData[0]?.PreferredLanguage == "en") == "hn"
                ? 2
                : 1
            )
          }
          style={{
            backgroundColor:
              getSelectionMode == 2 ? selectionColor : unSelectionColor,
            borderRadius: getRoundCorner ? 25 : 0,
            justifyContent: "center",
            alignItems: "center",
            borderColor: "#999999",
            // borderLeftWidth: getSelectionMode == 2 ? 1 : 0,
            borderWidth: 1,
            marginLeft: 5,
          }}
        >
          <Text
            style={{
              color:
                getSelectionMode == 2
                  ? selectionTextColor
                  : unSelectionTextColor,
              fontSize: 12,
              fontFamily: "Muli-SemiBold",
              marginLeft: 4,
              marginRight: 4,
            }}
          >
            {option2}
          </Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};
export default CustomSwitch;
