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

interface CategorySelectorProps {
  onPress? : () => void | undefined;
  selectedCategory? : Category;
}

const CategorySelector: React.FC<CategorySelectorProps> = (props : CategorySelectorProps) => {
  const {colors} = useTheme();
  

  return (
    <>
    <TouchableOpacity style={[styles.tile, {backgroundColor: colors.backgroundColor}]} onPress={props.onPress}>
      <View style={[styles.colorTip, {backgroundColor: props.selectedCategory?.color}]}>

      </View>
      <View style={[styles.textWrapper]}>
        <Text style={[styles.text, {color: colors.primaryText}]}>{props.selectedCategory?.name ?? "Tap to select Categroy"}</Text>
      </View>
      <View style={styles.tileTail}></View>
    </TouchableOpacity>
    </>
  )
}

export default CategorySelector

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,
  }
})