import React from 'react';

import {RootStackParamList} from '../routes';
import {RouteProp} from '@react-navigation/native';
import {StackNavigationProp} from '@react-navigation/stack';
import {
  Background,
  CenteredView,
  RegistrationWizard,
  SubmitButton,
} from '../components';
import {Text} from 'react-native-animatable';
import {
  CodeField,
  Cursor,
  useBlurOnFulfill,
  useClearByFocusCell,
} from 'react-native-confirmation-code-field';
import {StyleSheet, View, TouchableOpacity, KeyboardAvoidingView} from 'react-native';
type LoginScreenRouteProp = RouteProp<RootStackParamList, 'Login'>;
type LoginScreenNavigationProp = StackNavigationProp<
  RootStackParamList,
  'Login'
>;
interface VerificationProps {
  route: LoginScreenRouteProp;
  navigation: LoginScreenNavigationProp;
}

const Verification: React.FC<VerificationProps> = ({}) => {
  const [value, setValue] = React.useState('');
  const ref = useBlurOnFulfill({value, cellCount: 6});
  const [valueProps, getCellOnLayoutHandler] = useClearByFocusCell({
    value,
    setValue,
  });

  return (
    <Background centered style={styles.container}>
        <RegistrationWizard style={styles.wizard} step="one" />
        <KeyboardAvoidingView behavior='padding' style={styles.form}>
          <Text style={styles.formHeader}>Enter 6 digit code</Text>
          <Text style={styles.description}>
            We sent a 6 digit verification code to the email you provided.
          </Text>
          <CodeField
            ref={ref}
            {...valueProps}
            value={value}
            onChangeText={setValue}
            cellCount={6}
            rootStyle={styles.codeFieldRoot}
            keyboardType="number-pad"
            textContentType="oneTimeCode"
            renderCell={({index, symbol, isFocused}) => (
              <View
                onLayout={getCellOnLayoutHandler(index)}
                key={index}
                style={[styles.cellRoot, isFocused && styles.focusCell]}>
                <Text style={styles.cellText}>
                  {symbol || (isFocused ? <Cursor /> : null)}
                </Text>
              </View>
            )}
          />
          <SubmitButton
            text="Verify"
            color="#fff"
            style={styles.button}
            accessibilityLabel="Verify"
            accessibilityHint="Select this after entering your email verification code"
          />
          <TouchableOpacity>
            <Text style={styles.resend}>Resend Code</Text>
          </TouchableOpacity>
        </KeyboardAvoidingView>
    </Background>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  wizard: {
    marginTop: '3.5%',
    flex: 1,
    justifyContent: 'center'
  },
  form: {
    alignItems: 'center',
    justifyContent: 'flex-start',
    flex: 3,
  },
  formHeader: {
    color: '#fff',
    fontSize: 20,
    fontWeight: 'bold',
    alignSelf: 'flex-start',
    marginBottom: '6%',
    marginHorizontal: '10%',
  },
  description: {
    color: '#fff',
    fontWeight: '600',
    fontSize: 17,
    marginHorizontal: '10%',
  },
  resend: {
    textDecorationLine: 'underline',
    color: '#fff',
    fontSize: 15,
    fontWeight: '600',
  },
  codeFieldRoot: {
    width: 280,
    marginHorizontal: 'auto',
    marginVertical: '15%',
  },
  cellRoot: {
    width: 40,
    height: 60,
    justifyContent: 'center',
    alignItems: 'center',
    borderBottomColor: '#fff',
    borderBottomWidth: 1,
  },
  cellText: {
    color: '#fff',
    fontSize: 48,
    textAlign: 'center',
  },
  focusCell: {
    borderBottomColor: '#78a0ef',
    borderBottomWidth: 2,
  },
  button: {
    marginVertical: '5%'
  }
});
export default Verification;
