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

type ISOdateString = string

export type ExpenseItemProps = {color: ColorValue, category: string, title: string, date: ISOdateString, value : string}
export default function ExpenseItem(itemProps : ExpenseItemProps) {
  const {colors} = useTheme()
  const textColor = colors.primaryText
  const backgroundColor = colors.containerColor
  const date: SimpleDate = new SimpleDate(new Date(itemProps.date))
  return (
      <CustomCard>
        <View style={[styles.colorTip, {backgroundColor: itemProps.color}]}></View>
        <View style={[styles.textSection, {backgroundColor: backgroundColor}]}>
          <Text style={{
            fontSize: SIZES.normal,
            color: textColor
          }} numberOfLines={1}>{itemProps.category}</Text>
          <Text style={{
            fontSize: SIZES.large,
            color: textColor
          }} numberOfLines={1}>{itemProps.title}</Text>
          <Text style={{
            fontSize: SIZES.small,
            color: textColor
          }} numberOfLines={1}>{date.format("DD.MM.YYYY")}</Text>
        </View>
        <View style={[styles.valueSection, {backgroundColor: backgroundColor}]}>
          <Text style={{
            fontSize: SIZES.xxLarge,
            color: textColor
          }} numberOfLines={1}>{itemProps.value}</Text>
        </View>
       
      </CustomCard>
     
  )
}

const styles = StyleSheet.create({
  colorTip: {
    width: 20,
    borderTopLeftRadius: 20,
    borderBottomLeftRadius: 20,
  },
  
  textSection: {
    flexDirection: "column",
    alignContent: "space-between",
    alignItems:"flex-start",
    paddingLeft: 10,
    flex:1,
    alignSelf: "stretch",
    paddingVertical: 5
  },
  valueSection: {
    justifyContent:"center",
    borderTopRightRadius: 20,
    borderBottomRightRadius: 20,
  }
})