import RX = require('reactxp');

export default class Form extends RX.Component<any, any> {
    constructor(props) {
        super(props);
    }

    componentWillMount() {
        // set initial state of all the fields of the form
        let newState = {};
        for (let field of this.props.fields) {
            if (field.hidden === "true") {
                newState[field.name] = "default-hidden";
            } else if (field.type === "country") {
                newState[field.name] = this.props.countries[0];
            } else if (field.type === "select") {
                newState[field.name] = field.options[0].value;
            } else {
                newState[field.name] = "";
            }
            console.log(field);
        }
        this.setState(newState);
        console.log("this is the newstate", newState);
    }

    _onSubmit = () => {
        console.log(this.state)
    }

    _generatePicker = (field, index) => {
        return (
            <RX.View style={styles.field} key={index}>
                <RX.Text style={styles.label}>{field.label}</RX.Text>
                <RX.Picker items={field.type === "country" ? this.props.countries : field.options}
                    selectedValue={this.state[field.name]}
                    onValueChange={(value) => this.setState({ [field.name]: value })} />
            </RX.View>
        );
    }

    _generateTextInput = (field, index) => {
        return (
            <RX.View style={styles.field} key={index}>
                <RX.Text style={styles.label}>{field.label}</RX.Text>
                <RX.TextInput
                    style={field.type === "textarea" ? [styles.textInput, styles.textArea] : [styles.textInput]}
                    multiline={field.type === "textarea"}
                    placeholder={"type here"}
                    onChangeText={(value) => this.setState({ [field.name]: value })}
                />
            </RX.View>
        );
    }

    _generateForm = () => {
        let formFields = this.props.fields.map((field, index) => {
            if (field.hidden === "true") {
                return null;
            } else if (field.type === "country" || field.type === "select") {
                return this._generatePicker(field, index);
            } else if (field.type === "textarea" || field.type === "text") {
                return this._generateTextInput(field, index);
            } else {
                return null;
            }
        });
        return formFields;
    }

    _generateButton() {
        return (
            <RX.Button
                style={styles.button}
                onPress={() => this._onSubmit()}>
                <RX.Text style={styles.buttonTitle}>Submit</RX.Text>
            </RX.Button>
        );
    }

    render(): JSX.Element {
        return (
            <RX.ScrollView style={styles.container} >
                <RX.View>
                    {this._generateForm()}
                </RX.View>
                <RX.View>
                    {this._generateButton()}
                </RX.View>
            </RX.ScrollView>
        );
    }
}

const styles = {
    container: RX.Styles.createScrollViewStyle({
        margin: 10,
        flex: 1
    }),
    field: RX.Styles.createViewStyle({
        marginTop: 10,
        marginBottom: 10
    }),
    textInput: RX.Styles.createTextInputStyle({
        borderColor: 'lightgrey',
        borderWidth: 2,
        paddingLeft: 10,
        paddingRight: 10,
        minHeight: 50,
        borderRadius: 10
    }),
    textArea: RX.Styles.createTextInputStyle({
        minHeight: 100
    }),
    button: RX.Styles.createButtonStyle({
        flex: 1,
        flexDirection: "row",
        padding: 10,
        minHeight: 50,
        borderRadius: 10,
        backgroundColor: 'lightgrey',
    }),
    buttonTitle: RX.Styles.createTextStyle({
        justifyContent: "center",
        color: "white",
        fontSize: 18,
        fontWeight: "bold"
    }),
    label: RX.Styles.createTextStyle({
        fontWeight: "bold",
        color: "black"
    })
}