import React from "react";
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  TextInput,
} from "react-native";
import SetupView from '../components/SetupView';
import EvilIcon from "react-native-vector-icons/EvilIcons";
import MaterialIcon from "react-native-vector-icons/MaterialCommunityIcons";
import themeColors from '../components/themeColors';


function WifiPasswordView(props) {

  let iconName = "wifi-strength-" + props.strength;
  if (props.lock) {
    iconName += "-lock";
  }

  return (
    <SetupView
      headerText="WiFi Password"
      lowerRightButtonText="Need help?"
    >
      <Text style={styles.subtext}>
        {props.subText}
      </Text>

      <View style={styles.formContainer}>
        <View style={[styles.row, { backgroundColor: "rgba(155,155,155,0.8)" }]}>
          <MaterialIcon style={styles.ssidIcon} name={iconName}></MaterialIcon>
          <Text style={styles.ssidLabel} >{props.ssid}</Text>
        </View>

        <View style={styles.row}>
          <EvilIcon name="lock" style={styles.ssidIcon}></EvilIcon>
          <TextInput style={styles.passwordInput}
            autoCompleteType="password"
            placeholder="Password"
            placeholderTextColor="rgba(255,255,255,0.5)"
            secureTextEntry={true}
          ></TextInput>
        </View>

        {props.confirmPwInput &&
          < View style={styles.row}>
            <EvilIcon name="lock" style={styles.ssidIcon}></EvilIcon>
            <TextInput style={styles.passwordInput}
              autoCompleteType="password"
              placeholder="Repeat Password"
              placeholderTextColor="rgba(255,255,255,0.5)"
              secureTextEntry={true}
            ></TextInput>
          </View>
        }

        <TouchableOpacity style={[styles.row, styles.button]}>
          <Text style={[styles.ssidLabel, { alignSelf: "center", textAlign: "center" }]}>{props.buttonText}</Text>
        </TouchableOpacity>

      </View>

    </SetupView >
  );
}

WifiPasswordView.defaultProps = {
  lock: true,
  strength: 2,
  ssid: "TheWLANName",
  confirmPwInput: false,
  buttonText: "Set Password",
  subText: "Please enter password for your home WiFi"
}


WifiPasswordView.defaultProps = {
  lock: true,
  strength: 3,
  ssid: "swimtracker-E2842S",
  subText: "Use this option only if you're home WiFi doesn't reach the SwimTracker. The SwimTracker creates its own WiFi with the password you set here.",
  confirmPwInput: true,
  buttonText: "Set Password",
}


const styles = StyleSheet.create({
  subtext: {
    color: "rgba(255,255,255,1)",
    textAlign: "left",
    fontSize: 18,
    lineHeight: 25,
    width: "80%",
  },
  formContainer: {
  },
  row: {
    backgroundColor: "rgba(255,255,255,0.4)",
    borderRadius: 5,
    width: "100%",
    height: 50,
    flexDirection: "row",
    alignItems: "center",
    marginTop: 5,
    marginBottom: 5,
  },
  ssidLabel: {
    color: "rgba(255,255,255,1)",
    fontSize: 18,
    width: "100%"
  },
  button: {
    marginTop: 20,
    backgroundColor: themeColors["GREEN SEA"],
    justifyContent: "center"
  },
  ssidIcon: {
    fontSize: 25,
    color: "rgba(255,255,255,1)",
    marginLeft: 15,
    marginRight: 15,
  },
  passwordInput: {
    height: 30,
    color: "rgba(255,255,255,1)",
    width: "100%",
    fontSize: 18,
  }

});


export default WifiPasswordView;