import React from "react";
import {
  StyleSheet,
  View,
  StatusBar,
  ImageBackground,
  Text,
  TouchableOpacity,
} from "react-native";
import EntypoIcon from "react-native-vector-icons/Entypo";


function AdditionalOptionsBottomBar(props) {
  return (
    <View style={bottomBarStyles.container}>
      { props.leftText ?
        <TouchableOpacity onPress={props.onLeftPress}>
          <Text style={bottomBarStyles.text}>{props.leftText} </Text>
        </TouchableOpacity> : <View></View>
      }
      {props.rightText &&
        <TouchableOpacity onPress={props.onRightPress}>
          <Text style={bottomBarStyles.text}>{props.rightText}</Text>
        </TouchableOpacity>
      }
    </View>
  );
};

const bottomBarStyles = StyleSheet.create({
  container: {
    flexDirection: "row",
    justifyContent: "space-between",
    paddingBottom: 30,
  },
  text: {
    color: "rgba(255,255,255,0.5)",
  }
})

// ---------------------------------------------------------------------------------------------


function SetupView(props) {

  return (
    <View style={{ flex: 1 }}>

      <StatusBar barStyle="light-content" backgroundColor="rgba(0,0,0,0.4)" translucent={true} />
      <ImageBackground
        source={require("../assets/pool_sky_background_blurred.jpg")}
        resizeMode="cover"
        style={{ flex: 1 }}
      >
        <View style={setupViewStyles.container}>
          <View style={{ flexDirection: "row", alignItems: "center" }}>
            {props.backButton &&
              <TouchableOpacity onPress={props.navigation.goBack}>
                <EntypoIcon name="chevron-left" style={setupViewStyles.backButton}></EntypoIcon>
                </TouchableOpacity>
            }
            <Text style={setupViewStyles.headerText}>
              {props.headerText}
            </Text>
          </View>
          {props.children}
          <AdditionalOptionsBottomBar leftText={props.lowerLeftButtonText}
            onLeftPress={props.onLowerLeftButtonPress}
            rightText={props.lowerRightButtonText}
            onRightPress={props.onLowerRightButtonPress}>
          </AdditionalOptionsBottomBar>
        </View>
      </ImageBackground>
    </View>
  );
}

const setupViewStyles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "space-between",
    width: "80%",
    marginLeft: 40,
    marginTop: 60,
  },
  headerText: {
    color: "rgba(255,255,255,1)",
    fontSize: 25,
  },
  subtext: {
    color: "rgba(255,255,255,1)",
    textAlign: "left",
    fontSize: 18,
    lineHeight: 25,
    width: "80%",
  },
  backButton: {
    color: "rgba(255,255,255,1)",
    fontSize: 40
  },
});

export default SetupView;