import React from "react";
import {
  StyleSheet,
  Text,
  View,
  TextInput,
  ActivityIndicator,
} from "react-native";

import SetupView from '../components/SetupView';
import EvilIcon from "react-native-vector-icons/EvilIcons";
import { connect } from 'react-redux';
import { changeSwimTrackerHostname } from '../state/Reducer';


function ConnectingView(props) {

  let onHostnameChange = newHostName => {
    props.dispatch(changeSwimTrackerHostname(newHostName));
  };

  return (
    <SetupView
      headerText="Connecting..."
      lowerLeftButtonText="Advanced Setup"
      lowerRightButtonText="Need help?"
    >
      <ActivityIndicator size="large" color="#ffffff" />
      <Text style={styles.subtext}>
        Please connect your phone to the WiFi of your SwimTracker
      </Text>
      <View style={styles.row}>
        <EvilIcon name="archive" style={styles.hostIcon}></EvilIcon>
        <TextInput
          onChangeText={onHostnameChange}
          value={props.swimTrackerHost}
          style={styles.hostnameInput}
          placeholder="Hostname/IP"
          placeholderTextColor="rgba(255,255,255,0.5)"
        ></TextInput>
      </View>
    </SetupView>
  )
}

const styles = StyleSheet.create({
  subtext: {
    color: "rgba(255,255,255,1)",
    textAlign: "center",
    fontSize: 18,
    lineHeight: 25,
    width: "80%",
  },
  row: {
    backgroundColor: "rgba(255,255,255,0.4)",
    borderRadius: 5,
    width: "80%",
    height: 50,
    flexDirection: "row",
    alignItems: "center",
    marginTop: 60,
    marginBottom: 5,
  },
  hostIcon: {
    fontSize: 25,
    color: "rgba(255,255,255,1)",
    marginLeft: 15,
    marginRight: 15,
  },
  hostnameInput: {
    height: 30,
    color: "rgba(255,255,255,1)",
    width: "80%",
    fontSize: 18,
  }
});


const mapStateToProps = (state) => {
  return { swimTrackerHost: state.settings.swimTrackerHost };
};

export default connect(mapStateToProps)(ConnectingView);