import {RouteProp} from '@react-navigation/native';
import {StackNavigationProp} from '@react-navigation/stack';
import React, {useMemo} from 'react';
import {
  Alert,
  KeyboardAvoidingView,
  StyleSheet,
  TouchableOpacity,
  View,
} from 'react-native';
import {Text} from 'react-native-animatable';
import {
  CodeField,
  Cursor,
  useBlurOnFulfill,
  useClearByFocusCell,
} from 'react-native-confirmation-code-field';
import {normalize} from 'react-native-elements';
import {trackPromise} from 'react-promise-tracker';
import {
  ArrowButton,
  Background,
  LoadingIndicator,
  SubmitButton,
} from '../../components';
import {codeRegex} from '../../constants';
import {
  ERROR_INVALID_VERIFICATION_CODE_FORMAT,
  ERROR_SOMETHING_WENT_WRONG,
} from '../../constants/strings';
import {OnboardingStackParams} from '../../routes';
import {sendOtp, verifyOtp} from '../../services';
import {BackgroundGradientType} from '../../types';
import {HeaderHeight} from '../../utils';

type PhoneVerificationRouteProp = RouteProp<
  OnboardingStackParams,
  'PhoneVerification'
>;
type PhoneVerificationNavigationProp = StackNavigationProp<
  OnboardingStackParams,
  'PhoneVerification'
>;
interface PhoneVerificationProps {
  route: PhoneVerificationRouteProp;
  navigation: PhoneVerificationNavigationProp;
}

const PhoneVerification: React.FC<PhoneVerificationProps> = ({
  route,
  navigation,
}) => {
  const [value, setValue] = React.useState('');
  const ref = useBlurOnFulfill({value, cellCount: 6});
  const [valueProps, getCellOnLayoutHandler] = useClearByFocusCell({
    value,
    setValue,
  });
  const {phone} = route.params;

  const handleVerification = async () => {
    if (!codeRegex.test(value)) {
      Alert.alert(ERROR_INVALID_VERIFICATION_CODE_FORMAT);
      return;
    }
    try {
      const success = await trackPromise(verifyOtp(phone, value));
      if (success) {
        navigation.navigate('BasicInfoOnboarding', {isPhoneVerified: true});
      }
    } catch (error) {
      console.log(error);
      Alert.alert(ERROR_SOMETHING_WENT_WRONG);
    }
  };

  const footer = useMemo(
    () => (
      <ArrowButton
        style={styles.backArrow}
        direction="backward"
        onboarding={true}
        onPress={() =>
          navigation.navigate('BasicInfoOnboarding', {isPhoneVerified: false})
        }
      />
    ),
    [],
  );

  return (
    <Background
      centered
      style={styles.container}
      gradientType={BackgroundGradientType.Light}>
      <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 phone number 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 phone number verification code"
          onPress={handleVerification}
        />
        <TouchableOpacity onPress={() => sendOtp(phone)}>
          <Text style={styles.resend}>Resend Code</Text>
        </TouchableOpacity>
        <LoadingIndicator />
      </KeyboardAvoidingView>
      {footer}
    </Background>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  form: {
    top: '20%',
    alignItems: 'center',
    justifyContent: 'flex-start',
    flex: 3,
  },
  formPasswordVerification: {
    alignItems: 'center',
    justifyContent: 'flex-start',
    flex: 3,
    top: '35%',
  },
  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%',
  },
  loadingIndicator: {
    marginVertical: '5%',
  },
  backArrow: {
    width: normalize(29),
    height: normalize(25),
    position: 'absolute',
    top: HeaderHeight * 1.5,
    left: 20,
  },
});
export default PhoneVerification;