/**
 * 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 { TextInput, View, Platform } from 'react-native';
import Form from 'react-native-form';
import styles from './styles';

const MAX_LENGTH_CODE = 6;
const brandColor = '#744BAC';
interface OtpProps {}
interface OtpState {
  enterCode: boolean;
}

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

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

  render() {
    let textStyle = {
      height: 50,
      textAlign: 'center',
      fontSize: 40,
      fontWeight: 'bold',
    };

    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, styles.textStyle]}
              returnKeyType="go"
              autoFocus
              placeholderTextColor={brandColor}
              selectionColor={brandColor}
              maxLength={6}
            />
          </View>
        </Form>
      </View>
    );
  }
}
