import React from 'react';
import {View} from 'react-native';
import {Typography} from '@components/_core';
import {useTheme} from '@shared/theme';

import {INPUT_OTP_SIZES} from '../../constants';
import {InputOTPLength, InputOTPType} from '../../interfaces';
import {InputCommonProps} from '../../../../interfaces';
import {useInputColors} from '../../../../hooks/useInputColors';
import {styles} from './styles';

interface Props extends InputCommonProps {
  code?: string;
  index: number;
  length: InputOTPLength;
  type?: InputOTPType;
}

export function OTPBox({
  code,
  index,
  isError,
  isSuccess,
  focused,
  length,
  type,
  disabled,
}: Props) {
  const {theme} = useTheme();
  const digit = code?.[index] && type !== 'default' ? '•' : code?.[index];
  const isCodeComplete = code?.length === INPUT_OTP_SIZES[length];
  const {inputBackground, inputBorder} = useInputColors({
    isSuccess,
    isError,
    focused: focused || isCodeComplete,
    disabled,
  });

  return (
    <View
      style={[
        styles.box,
        {
          backgroundColor: inputBackground,
          borderColor: inputBorder,
        },
        type === 'custom' && styles.custom,
      ]}>
      <Typography
        variant="xl"
        weight="semiBold"
        color={
          disabled ? theme.text.neutral.disabled : theme.text.neutral.default
        }
        style={styles.boxText}>
        {digit || ''}
      </Typography>
    </View>
  );
}
