import React from 'react';
import {
  Pressable,
  ScrollView,
  View,
} from 'react-native';
import {
  Colors,
  fontSz,
  globalStyles,
  ms,
  savingsOptionsColors,
} from '../../../utils';
import Input from '../../Input';
import CurrencyInput from '../../Input/currency';
import {Text} from '../../Text';

interface CommonSavingsFieldsProps {
  // Color selection
  savingsColor: string;
  onColorChange: (color: string) => void;
  colorError?: string;
  primaryColor: string;

  // Name field
  name: string;
  onNameChange: (name: string) => void;
  nameError?: string;

  // Amount field
  amount: string;
  onAmountChange: (amount: number) => void;
  amountError?: string;
  amountLabel?: string; // "Savings Target" or "Lock Amount"
  showAmountField?: boolean; // Whether to show the amount field at all

  // Balance display (optional - for locked savings)
  walletBalance?: number;
  showBalance?: boolean;
  isLoadingBalance?: boolean;

  // Layout event handlers for scrolling
  onColorLayout?: (event: any) => void;
  onNameLayout?: (event: any) => void;
  onAmountLayout?: (event: any) => void;
}

const CommonSavingsFields: React.FC<CommonSavingsFieldsProps> = ({
  savingsColor,
  onColorChange,
  colorError,
  primaryColor,
  name,
  onNameChange,
  nameError,
  amount,
  onAmountChange,
  amountError,
  amountLabel = 'Savings Target',
  showAmountField = true,
  walletBalance = 0,
  showBalance = false,
  isLoadingBalance = false,
  onColorLayout,
  onNameLayout,
  onAmountLayout,
}) => {
  return (
    <>
      {/* Color Selection */}
      <View onLayout={onColorLayout}>
        <View
          style={[
            globalStyles.rowStart,
            {
              marginTop: ms(0),
            },
          ]}>
          <Text
            fontSize={fontSz(14)}
            fontFamily="Gordita-Regular"
            fontWeight="400"
            text="Select a colour for your savings"
            color={Colors.inputBackgroundLight}
          />
          <Text
            fontSize={fontSz(14)}
            fontFamily="Gordita-Regular"
            fontWeight="400"
            text=" *"
            color={Colors.error}
          />
        </View>
        <ScrollView
          horizontal
          showsHorizontalScrollIndicator={false}
          contentContainerStyle={[
            {columnGap: ms(10), marginTop: ms(5)},
          ]}>
          {savingsOptionsColors.map((option, index) => {
            const isSelected = option === savingsColor;

            return (
              <Pressable
                key={index}
                onPress={() => onColorChange(option)}
                style={[
                  globalStyles.rowBetween,
                  {
                    height: ms(40),
                    width: ms(40),
                    backgroundColor: option,
                    borderRadius: ms(40 / 2),
                    borderColor: primaryColor,
                    borderWidth: isSelected ? ms(2.5) : 0,
                  },
                ]}
              />
            );
          })}
        </ScrollView>
        {colorError && (
          <Text
            fontSize={fontSz(12)}
            fontFamily="Gordita-Regular"
            fontWeight="400"
            text={colorError}
            color={Colors.error}
            style={{marginTop: ms(5)}}
          />
        )}
      </View>

      {/* Name Field */}
      <View onLayout={onNameLayout}>
        <Input
          value={name}
          label="Name"
          showAsterisk={true}
          placeholder="Enter name"
          keyboardType="default"
          autoCompleteType="off"
          returnKeyType="done"
          onChange={(value: React.SetStateAction<string>) => {
            onNameChange(String(value));
          }}
          errorMsg={nameError || ''}
          onEndEditing={() => {}}
          onFocus={() => {}}
        />
      </View>

      {/* Amount Field - Only show if showAmountField is true */}
      {showAmountField && (
        <View onLayout={onAmountLayout}>
          <CurrencyInput
            value={amount}
            key={showBalance ? walletBalance.toString() : undefined}
            onChangeValue={(value: any) => {
              const numericValue = Number(value);
              onAmountChange(numericValue);
            }}
            ignoreNegative={false}
            delimiter=","
            separator="."
            precision={2}
            containerStyle={{marginBottom: ms(0)}}
            returnKeyType="done"
            topComponent={<></>}
            walletAmount={showBalance ? walletBalance : 0}
            paymentAmount={Number(amount)}
            onPressUseAllBalance={showBalance ? () => onAmountChange(walletBalance) : () => {}}
            onEndEditing={() => {}}
            onFocus={() => {}}
            label={amountLabel}
            showAsterisk={true}
            placeholder=""
            balance={showBalance ? walletBalance : 0}
            wrapperStyle={{
              borderColor: amountError ? Colors.error : '#F4F4F4',
            }}
            errorMsg={amountError ?? ''}
            showUseAllBalance={showBalance && walletBalance > 0 && !isLoadingBalance}
            showCurrency
            hideBalance={!showBalance}
          />
        </View>
      )}
    </>
  );
};

export default CommonSavingsFields;