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


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

  return (
    <TouchableOpacity>
      <View style={wifiListElementStyles.container}>
        <MaterialIcon style={wifiListElementStyles.icon} name={iconName}></MaterialIcon>
        <Text style={wifiListElementStyles.text} >{props.text}</Text>
      </View>
    </TouchableOpacity>
  )
}
const wifiListElementStyles = {
  container: {
    backgroundColor: "rgba(255,255,255,0.4)",
    borderRadius: 5,
    width: "100%",
    height: 50,
    flexDirection: "row",
    alignItems: "center",
    marginTop: 8,
    marginBottom: 8,
  },
  icon: {
    fontSize: 25,
    color: "rgba(255,255,255,1)",
    marginLeft: 15,
    marginRight: 15,
  },
  text: {
    color: "rgba(255,255,255,1)",
    fontSize: 18,
    width: "100%"
  }
};

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


function WifiSelectionView(props) {

  return (
    <SetupView
      headerText="WiFi Connection"
      lowerLeftButtonText="My WiFi wasn't found"
      lowerRightButtonText="Need help?"
    >
      <View style={styles.listContainer}>
        <ScrollView>
          <WifiListElement text="WLAN" strength="4" lock={true}></WifiListElement>
          <WifiListElement text="GastWLAN" strength="2" lock={false}></WifiListElement>

          <WifiListElement text="WLAN" strength="4"></WifiListElement>
          <WifiListElement text="GastWLAN" strength="2"></WifiListElement>

          <WifiListElement text="WLAN" strength="4"></WifiListElement>
          <WifiListElement text="GastWLAN" strength="2"></WifiListElement>
        </ScrollView>

      </View>
    </SetupView>
  )
}

const styles = StyleSheet.create({
  listContainer: {
    height: "75%",
    //backgroundColor: "red",
  }
});

export default WifiSelectionView;