/**
 * 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 { NavigationStackScreenProps } from 'react-navigation-stack';
import styles from './styles';

const MAX_LENGTH_CODE = 6;
const brandColor = '#744BAC';

interface OtpComponentProps extends NavigationStackScreenProps {
  onTextChange: (text: string) => void;
  textValue: string;
}

interface OtpComponentState {
  enterCode: boolean;
}

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

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