/* eslint-disable react-native/no-inline-styles */
import React, {useCallback, useState} from 'react';
import {
  Keyboard,
  NativeSyntheticEvent,
  Platform,
  StyleSheet,
  TextInput,
  TextInputContentSizeChangeEventData,
  TextInputProps,
  View,
} from 'react-native';
import {
  formatAmountInCurrency,
  MAX_AMOUNT_LENGTH_CURRENCY_SECTION,
  trimNumber,
} from '../../utils/functions';
import colors from '../../utils/helpers/colors';
import {InlineError} from '../../utils/helpers/Reusables';
import AppText from '../texts/appText';

interface CurrencySectionProps extends TextInputProps {
  title?: string;
  amount?: string;
  error?: string;
  onChangeAmount?: (amount: string) => void;
  isEditable?: boolean;
  currency?: string;
}

const CurrencySection: React.FC<CurrencySectionProps> = ({
  title = 'Enter amount',
  amount = '',
  error = '',
  onChangeAmount,
  isEditable = true,
  currency = '₦',
  ...props
}) => {
  const [height, setHeight] = useState(42);

  const onChangeText = useCallback(
    (text: string) => {
      onChangeAmount?.(trimNumber(text));
    },
    [onChangeAmount],
  );

  const onBlur = useCallback(() => {
    if (amount) {
      const formattedAmount = formatAmountInCurrency(
        Number(amount.replaceAll(',', '')),
      ).replaceAll(',', '');
      onChangeAmount?.(formattedAmount);
    }
  }, [amount, onChangeAmount]);

  const handleContentSizeChange = useCallback(
    (e: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => {
      setHeight(e.nativeEvent.contentSize.height);
    },
    [],
  );

  return (
    <View style={styles.amountContainerStyle}>
      {title ? <AppText size={15}>{title}</AppText> : null}
      <View style={[styles.rowContainer, {alignItems: 'center'}]}>
        <AppText size={36} weight="bold">
          {currency}
        </AppText>
        <TextInput
          value={amount}
          style={[
            styles.amountInputTextStyle,
            !amount?.length && styles.emptyInputFieldStyle,
            {height},
          ]}
          onContentSizeChange={handleContentSizeChange}
          placeholderTextColor={colors.grey}
          underlineColorAndroid="transparent"
          placeholder="0.00"
          keyboardType="numeric"
          returnKeyType="done"
          onChangeText={onChangeText}
          onBlur={onBlur}
          editable={isEditable}
          multiline
          maxLength={MAX_AMOUNT_LENGTH_CURRENCY_SECTION}
          onSubmitEditing={Keyboard.dismiss}
          {...props}
        />
      </View>

      {error?.toString()?.length > 0 && (
        <InlineError
          style={{marginTop: 10, padding: 10, borderRadius: 18}}
          message={error}
        />
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  amountContainerStyle: {
    alignItems: 'center',
    backgroundColor: 'transparent',
  },
  rowContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  amountInputTextStyle: {
    fontSize: 36,
    fontWeight: '600',
    backgroundColor: 'transparent',
    ...(Platform.OS === 'ios' ? {paddingBottom: 6} : {}),
  },
  emptyInputFieldStyle: {width: 100},
});

export default CurrencySection;