import React from 'react';
import { ColorValue, StyleSheet, Text, View } from 'react-native';
import { SIZES } from '../../constants/theme';
import CustomCard from "../common/CustomCard";
import { useTheme } from '../../app/contexts/ThemeContext';
import { TouchableOpacity } from 'react-native-gesture-handler';

//export type ExpenseItemProps = {color: ColorValue, category: string, title: string, date: string, value : string}
interface ExpenseItemProps {
  color: ColorValue;
  category: string;
  title: string;
  date: string;
  value : string;
  guid? : string;  
  onPress? : (guid?: string) => void
}

export default function ExpenseItem(itemProps : ExpenseItemProps) {
  const { colors } = useTheme(); 
  const handlePress = ()=>{
    if(itemProps.onPress){
      itemProps.onPress(itemProps.guid);
    }
  }
  return (
      <CustomCard>
        <TouchableOpacity onPress={handlePress}>
          <View style={styles.tile}>
            <View style={[styles.colorTip, {backgroundColor: itemProps.color}]}></View>
            <View style={[styles.textSection, {backgroundColor: colors.backgroundColor}]}>
              <Text style={{
                fontSize: SIZES.normal,
                color: colors.primaryText
              }} numberOfLines={1}>{itemProps.category}</Text>
              <Text style={{
                fontSize: SIZES.large,
                color: colors.primaryText
              }} numberOfLines={1}>{itemProps.title}</Text>
              <Text style={{
                fontSize: SIZES.small,
                color: colors.primaryText
              }} numberOfLines={1}>{itemProps.date}</Text>
            </View>
            <View style={[styles.valueSection, {backgroundColor: colors.backgroundColor}]}>
              <Text style={{
                fontSize: SIZES.xxLarge,
                color: colors.primaryText
              }} numberOfLines={1}>{itemProps.value}</Text>
            </View>
          </View>
       </TouchableOpacity>
      </CustomCard>
     
  )
}

const styles = StyleSheet.create({
  colorTip: {
    width: 20,
    borderTopLeftRadius: 20,
    borderBottomLeftRadius: 20,
  },

  tile: {
    flexDirection: "row",
    alignItems: "stretch",
    alignContent: "space-between",
  },
  
  textSection: {
    flexDirection: "column",
    alignContent: "space-between",
    alignItems:"flex-start",
    paddingLeft: 10,
    flex:1,
    alignSelf: "stretch",
    paddingVertical: 5
  },
  valueSection: {
    justifyContent:"center",
    borderTopRightRadius: 20,
    borderBottomRightRadius: 20,
  }
})