import React from 'react';
import { ImageBackground, View, Image, TextInput, Button, StyleSheet } from 'react-native';
// Helpers
import Helpers from '../../Helpers';
// Common Styles 
import commonStyles from '../../Resources/CommonStyles';
// Translations
import i18n from "../../I18n";
// Controller
import InstallController from '../Controllers/InstallController';

class InstallScreen extends React.Component {
    state = {
        url: "",
    }

    render() {
        return (
            <ImageBackground source={require('../../Resources/assets/img/background_ldc.png')} style={commonStyles.background}>
                <View style={commonStyles.container}>
                    <Image source={require('../../Resources/assets/img/logo-square-ldc.png')} style={styles.logo} />
                    <View style={styles.actions}>
                        <TextInput
                            style={commonStyles.textInput}
                            placeholder={i18n.t("install.enter_url")}
                            onChangeText={(newText) => this.setState({ url: newText })}
                            value={this.state.url}
                        />
                        <Button
                            color={'#D4021D'}
                            title={ i18n.t('install.install')}
                            onPress={() => {
                                if (this.state.url.length === 0) {
                                    alert(i18n.t("install.enter_url"));
                                } else {
                                    if (Helpers.isUrlValid(this.state.url)) {
                                        InstallController.getConfig(this.state.url);
                                    } else {
                                        alert(i18n.t("install.url_invalid"));
                                    }
                                }
                            }}
                        />
                    </View>
            </View>
        </ImageBackground>
          );
  }
}

const styles = StyleSheet.create({
    logo: {
        width: 150,
        height: 150,
        marginBottom: 20
    },
    actions: {
        marginTop: 20
    },
  });

export default InstallScreen;