import {StyleSheet, View} from 'react-native';
import {
  Colors,
  fontSz,
  formatAsCurrency,
  formatDate,
  globalStyles,
  hp,
  Images,
  ms,
} from '../../utils';
import {CustomPressable} from '../Button';
import {Text} from '../Text';
import {SmartImage} from '../Images/SmartImage';

export const getTextColor = (status: 'Debit' | 'Credit') => {
  switch (status) {
    case 'Debit':
      return Colors.debitRed;
    case 'Credit':
      return Colors.creditGreen;
  }
};

export const getBackgroundColor = (status: 'Debit' | 'Credit') => {
  switch (status) {
    case 'Debit':
      return Colors.debitRedBackground;
    case 'Credit':
      return Colors.creditGreenBackground;
  }
};

const showIcon = (status: 'Debit' | 'Credit') => {
  switch (status) {
    case 'Debit':
      return (
        <SmartImage
          source={Images.debit}
          style={{
            width: ms(18),
            height: ms(18),
          }}
        />
      );
    case 'Credit':
      return (
        <SmartImage
          source={Images.credit}
          style={{
            width: ms(18),
            height: ms(18),
          }}
        />
      );
    default:
      break;
  }
};

const TransactionIcon = ({status}: {status: 'Debit' | 'Credit'}) => {
  return (
    <View
      style={[
        styles.iconContainer,
        {
          backgroundColor: getBackgroundColor(status),
        },
      ]}>
      {showIcon(status)}
    </View>
  );
};

const TransactionCard = ({
  status,
  title,
  transactionType,
  showTransactionType,
  amount,
  onPress,
  createdDate,
  bottomSpacing = 12.5,
}: {
  status: 'Debit' | 'Credit';
  title: string;
  amount: number;
  transactionType: string;
  showTransactionType: boolean;
  onPress: () => void;
  createdDate: string;
  bottomSpacing?: number;
}) => {
  return (
    <CustomPressable
      style={[
        globalStyles.rowBetween,
        {
          marginTop: hp(12.5),
          marginBottom: ms(bottomSpacing),
          height: fontSz(45),
          alignItems: 'center',
        },
      ]}
      onPress={onPress}>
      <View
        style={[
          globalStyles.rowStart,
          {
            flex: 1,
            height: '100%',
            alignItems: 'center',
          },
        ]}>
        <TransactionIcon status={status} />
        <View
          style={[
            globalStyles.colBetween,
            {
              flex: 1,
            },
          ]}>
          <Text
            numberOfLines={1}
            fontWeight="400"
            style={{
              color: Colors.transactionCardHeader,
              paddingBottom: ms(6),
            }}
            fontSize={fontSz(12)}
            text={title ?? ''}
          />
          <Text
            fontWeight="400"
            style={{
              color: Colors.transactionCardTime,
            }}
            fontSize={fontSz(11)}
            text={formatDate(createdDate)}
          />
          {/* <View
            style={{
              paddingVertical: ms(3),
              paddingHorizontal: ms(4),
              borderRadius: ms(4),
              backgroundColor: Colors.transactionCardTypeBackground,
            }}>
            <Text
              fontWeight="400"
              style={{
                // flex: 1,
                color: Colors.transactionCardTime,
              }}
              fontSize={fontSz(11)}
              text={formatAsCurrency(amount)}
            />
          </View> */}
        </View>
      </View>
      <View style={[globalStyles.colBetween, {alignItems: 'flex-end'}]}>
        <Text
          style={{
            color: getTextColor(status),
          }}
          fontWeight="400"
          fontSize={fontSz(14)}
          text={formatAsCurrency(amount)}
        />
      </View>
    </CustomPressable>
  );
};

export default TransactionCard;

const styles = StyleSheet.create({
  iconContainer: {
    justifyContent: 'center',
    alignItems: 'center',
    width: fontSz(45),
    height: fontSz(45),
    borderRadius: fontSz(45 / 2),
    marginRight: fontSz(12.5),
  },
  transactionTypeContainer: {
    alignSelf: 'flex-start',
    paddingHorizontal: fontSz(8),
    paddingVertical: fontSz(5),
    borderRadius: fontSz(4),
    backgroundColor: Colors.transactionCardTypeBackground,
  },
});