import * as React from "react"
import { View, TextInput, TouchableOpacity } from "react-native"

import * as validate from "../../utils/validate"

export interface Props extends NavigationScreenProps<{}> {}

export interface State {
  form: {
    textInput: string;
    secondTextInput: string;
  };
}

export class FirstExampleScreen extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);

    this.state = {
      form: {
        textInput: '',
        secondTextInput: '',
      },
    }
  }

  _validateForm = () => {
    const constraints = {
      textInput: {
        presence: true,
        length: {
          minimum: 5,
        },
        equality: 'premier',
      },
      secondTextInput: {
        presence: true,
        inclusion: ['test', 'tesT', 'TEST'],
      },
    }

    const valid = validate.validate(constraints, this.state.form);
    console.log(`${JSON.stringify(valid)}`);
  }

  render() {
    return (
      <View style={FULL}>
        <Screen
          style={CONTAINER}
          preset="scroll"
          backgroundColor={color.transparent}>
          <Text style={{ color: '#373737' }}>
            Premier input
          </Text>
          <TextInput
            style={{width: '80%', height: 60, borderColor: '#373737', borderWidth: 2}}
            onChangeText={(textInput) => this.setState({ form: { ...this.state.form, textInput } })}
            value={this.state.form.textInput} />

          <Text style={{ color: '#373737' }}>
            Second input
          </Text>
          <TextInput
            style={{width: '80%', height: 60, borderColor: '#373737', borderWidth: 2}}
            onChangeText={(secondTextInput) => this.setState({ form: { ...this.state.form, secondTextInput } })}
            value={this.state.form.secondTextInput} />

          <TouchableOpacity
            style={{ width: '50%', height: 35, backgroundColor: 'purple' }}
            onPress={this._validateForm}>
            <Text>Valider</Text>
          </TouchableOpacity>
        </Screen>
      </View>
    )
  }
}