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

import SetupView from '../components/SetupView';
import { connect } from 'react-redux';
import { changeSwimTrackerHostname } from '../state/Reducer';
import i18n from 'i18n-js';

const validHostnameRegex = /((^\s*((([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]))\s*$)|(^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$))|(^\s*((?=.{1,255}$)(?=.*[A-Za-z].*)[0-9A-Za-z](?:(?:[0-9A-Za-z]|\b-){0,61}[0-9A-Za-z])?(?:\.[0-9A-Za-z](?:(?:[0-9A-Za-z]|\b-){0,61}[0-9A-Za-z])?)*)\s*$)/;

function isValidHostname(hostname) {
  return validHostnameRegex.test(hostname);
}

function ConnectingView(props) {

  const [isHostnameValid, setIsHostnameValid] = useState(isValidHostname(props.swimTrackerHost));
  const [hostnameTextInput, setHostnameTextInput] = useState(props.swimTrackerHost);
  const [advancedMode, setAdvancedMode] = useState(false);


  let onHostnameChange = newHostName => {
    setHostnameTextInput(newHostName);
    const newHostnameValid = isValidHostname(newHostName);
    setIsHostnameValid(newHostnameValid);
    if (newHostnameValid) {
      props.dispatch(changeSwimTrackerHostname(newHostName));
    }
    return true;
  };

  const hiddenStyle = advancedMode ? {} : {"display": "none"};

  return (
    <SetupView
      headerText={i18n.t("connecting") + "..."}
      lowerLeftButtonText={ i18n.t(advancedMode ? 'simpleMode' : 'advancedMode') }
      onLowerLeftButtonPress={() => { setAdvancedMode(!advancedMode); }}
      lowerRightButtonText={i18n.t('help')}
    >
      <View style={{flexDirection: "row", alignItems: "center"}}>
      <ActivityIndicator size="large" color="#ffffff" />
      <Text style={styles.subtext}>
        {i18n.t('connectSubtext')}
      </Text>
      </View>
      {true &&
          <View style={StyleSheet.flatten([styles.row, hiddenStyle])}>
            <Text style={styles.label}>Host:</Text>
            <TextInput
              onChangeText={onHostnameChange}
              value={hostnameTextInput}
              style={{ ...styles.hostnameInput, color: isHostnameValid ? "rgb(255, 255, 255)" : "rgb(255, 150, 150)" }}
              placeholderTextColor="rgba(255,255,255,0.5)"
            />
          </View>
      }
    </SetupView>
  )
}

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


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

export default connect(mapStateToProps)(ConnectingView);