import { StyleSheet, Text, View, Pressable } from 'react-native'
import React from 'react'
import { Category } from '../../types/dbItems'
import CustomCard from './CustomCard';
import { SIZES } from '../../constants/theme';
import { useTheme } from '../../app/contexts/ThemeContext';

interface CategoryListItemProps{
  category: Category;
  onPress?: (category: Category) =>void | undefined
}



const CategoryListItem: React.FC<CategoryListItemProps> = (props: CategoryListItemProps) => {
  const {category, onPress} = props;
  const {colors} = useTheme();
  
  const handlePress = ()=>{
    if(onPress){
      onPress(category);
    }
  }

  return (
      <Pressable onPress={handlePress}>
        <View style={[styles.tile, {backgroundColor: colors.backgroundColor}]}>
          <View style={[styles.colorTip, {backgroundColor: category.color}]}/>
          <View style={[styles.textWrapper]}>
            <Text style={[styles.text, {color: colors.primaryText}]}>{category.name ?? "#noData#"}</Text>
          </View>
          <View style={styles.tileTail}/>
        </View>
      </Pressable>
  )
}

export default CategoryListItem

const styles = StyleSheet.create({
  tile: {
    height: 60,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    borderRadius: 20
  },
  colorTip:{
    height: "100%",
    width: 30,
    borderTopLeftRadius:20,
    borderBottomLeftRadius: 20
  },
  textWrapper: {
   
  },
  tileTail:{
    height: "100%",
    width: 30,
    borderTopRightRadius:20,
    borderBottomRightRadius: 20
  },
  text: {
    fontSize: SIZES.large,
  }
})