import { Id, Product, dimensions_t } from "@/lib/product" import { useState } from "react" import { Button, FlatList, StyleSheet, Text, TextInput, Touchable, TouchableHighlight, View } from "react-native" import { ProductAttributeEditor } from "./ProductAttributeEditor"; import { Dropdown } from 'react-native-element-dropdown'; import { Ionicons } from "@expo/vector-icons"; import { Length } from "convert"; export type ProductAddedFunc = () => any; export type ProductDeletedFunc = (product_id: Id) => any; export type AttributeAddedFunc = (product_id: Id) => any; export type AttributeKeyUpdatedFunc = (product_id: Id, oldKey: string, newKey: string) => any; export type AttributeUpdatedFunc = (product_id: Id, attribute: string, value: string) => any; export type AttributeDeletedFunc = (product_id: Id, attribute: string) => any; export type PriceUpdatedFunc = (product_id: Id, price: number) => any; export type DimensionUpdatedFunc = (product_id: Id, dimension: dimensions_t) => any; export type ProductEditorItemProps = { product: Product, onProductAdded?: ProductAddedFunc, onProductDeleted?: ProductDeletedFunc, onAttributeAdded?: AttributeAddedFunc, onAttributeKeyChanged?: AttributeKeyUpdatedFunc, onAttributeUpdated?: AttributeUpdatedFunc, onAttributeDeleted?: AttributeDeletedFunc, onPriceUpdated?: PriceUpdatedFunc, onDimensionsUpdated?: DimensionUpdatedFunc, } export const ProductEditorItem = (props: ProductEditorItemProps) => { const [showAttributes, setShowAttributes] = useState(false); const product = props.product; function onAttributeChanged(key: string, newValue: string) { props.onAttributeUpdated && props.onAttributeUpdated(product.id, key, newValue); } function onAttributeKeyChanged(oldKey: string, newKey: string) { props.onAttributeKeyChanged && props.onAttributeKeyChanged(product.id, oldKey, newKey); } function onAttributeDelete(key: string) { props.onAttributeDeleted && props.onAttributeDeleted(product.id, key); } function onPricePerUnitChange(pricePerUnit: string) { props.onPriceUpdated && props.onPriceUpdated(product.id, parseFloat(pricePerUnit) || parseInt(pricePerUnit)); } function onUnitsChanged(newUnits: Length) { props.onDimensionsUpdated && props.onDimensionsUpdated(product.id, { ...(product.dimensions as dimensions_t), u: newUnits, }) } function onChangeLength(len: string) { const l = parseFloat(len) || parseInt(len); props.onDimensionsUpdated && props.onDimensionsUpdated(product.id, { ...(product.dimensions as dimensions_t), l, }) } function onChangeWidth(width: string) { const w = width.length == 0 ? null : parseFloat(width) || parseInt(width); props.onDimensionsUpdated && props.onDimensionsUpdated(product.id, { ...(product.dimensions as dimensions_t), ...(w ? {w} : {}), }) } function onDeleteProduct() { props.onProductDeleted && props.onProductDeleted(product.id); } const length = new String(product.dimensions.l || product.dimensions.l || "0") as string; const width = new String(product.dimensions.w || "") as string; const dimension = product.dimensions.u || product.dimensions.u || "foot"; return ( setShowAttributes(!showAttributes)} aria-label="Product Item" style={styles.productItemName} > {product.attributes.name || `Product ${product.id}`} onDeleteProduct()} aria-label="delete product" style={styles.deleteProductHighlight} > {showAttributes && ( $ per onUnitsChanged(item.value as Length)} /> x