/**
 * React Native Full App (https://store.enappd.com/product/react-native-full-app)
 *
 * Copyright © 2019-present Enappd. All rights reserved.
 *
 * This source code is licensed as per the terms found in the
 * LICENSE.md file in the root directory of this source tree.
 */
import React, { Component } from 'react';

import { StyleSheet, Text, TextInput, View, Platform } from 'react-native';
import Form from 'react-native-form';
const MAX_LENGTH_CODE = 6;
const brandColor = '#744BAC';
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },

  form: {
    margin: 20,
  },
  textInput: {
    padding: 0,
    margin: 0,
    flex: 1,
    color: brandColor,
    height: 50,
    textAlign: 'center',
    fontSize: 40,
    fontWeight: 'bold',
  },
});

interface OtpComponentProps {}

interface Istate {
  enterCode: boolean;
}

export default class OtpComponent extends React.Component<
  OtpComponentProps,
  Istate
> {
  constructor(props: OtpComponentProps) {
    super(props);
    this.state = {
      enterCode: true,
    };
  }

  _onChangeText = (val: any) => {
    if (!this.state.enterCode) return;
    if (val.length === MAX_LENGTH_CODE) {
    }
  };

  render() {
    return (
      <View style={styles.container}>
        <Form ref={'form'} style={styles.form}>
          <View style={{ flexDirection: 'row' }}>
            <TextInput
              ref={'textInput'}
              underlineColorAndroid={'transparent'}
              autoCapitalize={'none'}
              autoCorrect={false}
              onChangeText={this._onChangeText}
              placeholder={'_ _ _ _ _ _'}
              keyboardType={Platform.OS === 'ios' ? 'number-pad' : 'numeric'}
              style={[styles.textInput]}
              returnKeyType="go"
              autoFocus
              placeholderTextColor={brandColor}
              selectionColor={brandColor}
              maxLength={6}
            />
          </View>
        </Form>
      </View>
    );
  }
}
