PliWould/components/ProductEditorItem.tsx

import { Id, Product } from "@/lib/product"
import { dimensions_t } from "@/lib/dimensions_t";
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 (
        <View>
            <View style={styles.productListHeader}>
                <TouchableHighlight
                    onPress={() => setShowAttributes(!showAttributes)}
                    aria-label="Product Item"
                    style={styles.productItemName}
                >
                    <Text style={styles.productNameText}>{product.attributes.name || `Product ${product.id}`}</Text>
                </TouchableHighlight>
                <TouchableHighlight
                    onPress={() => onDeleteProduct()}
                    aria-label="delete product"
                    style={styles.deleteProductHighlight}
                    >
                        <Ionicons
                            style={styles.deleteProductButton}
                            name="trash-outline"
                        />
                </TouchableHighlight>
                </View>
            {showAttributes &&
                (
                    <View style={styles.detailsWrapper}>
                        <View style={styles.priceSpecWrapper}>
                            <Text style={styles.priceLabel}>$</Text>
                            <TextInput inputMode="decimal"
                                defaultValue={new String(product.pricePerUnit) as string}
                                aria-label="price per unit"
                                onChangeText={onPricePerUnitChange}
                                style={styles.priceInput}
                            />
                            <Text style={styles.per}>per</Text>
                            <Dropdown
                                data={[
                                    {label: "feet", value: "ft"},
                                    {label: "inches", value: "in"},
                                ]}
                                style={styles.unitsSelect}
                                mode="modal"
                                labelField="label"
                                valueField="value"
                                value={product.dimensions.u || "ft"}
                                onChange={(item) => onUnitsChanged(item.value as Length)}
                            />
                            <TextInput
                                inputMode="decimal"
                                defaultValue={length}
                                onChangeText={onChangeLength}
                                style={styles.lengthInput}
                                aria-label="length"
                            />
                            <Text style={{flex: 1,}}>x</Text>
                            <TextInput
                                inputMode="decimal"
                                defaultValue={width}
                                onChangeText={onChangeWidth}
                                style={styles.widthInput}
                                aria-label="width"
                            />
                        </View>
                        <Button title="+ Add Attribute" onPress={() => props.onAttributeAdded && props.onAttributeAdded(product.id)} />
                        <FlatList
                            style={styles.productAttributesList}
                            data={Object.entries(product.attributes)}
                            renderItem={({ item }) => (
                                <ProductAttributeEditor
                                    attributeKey={item[0] || "some key"}
                                    attributeValue={item[1]}
                                    onChangeAttributeKey={onAttributeKeyChanged}
                                    onChangeAttribute={onAttributeChanged}
                                    onDelete={onAttributeDelete}
                                />
                            )}
                            keyExtractor={(item, i) => `${product.id}-${i}`}
                        />
                    </View>
                )
            }
        </View>
    )
}

const styles = StyleSheet.create({
    deleteProductHighlight: {

        padding: 5,
        borderWidth: 1,
    },
    deleteProductButton: {
        fontSize: 20,
    },
    detailsWrapper: {

    },
    priceSpecWrapper: {
        flexDirection: "row",
    },
    priceLabel: {
    },
    priceInput: {
        flex: 1,
        borderWidth: 2,
        borderColor: "lightgrey",
        borderStyle: "solid",
    },
    per: {
        padding: 5,
    },
    unitsLabel: {  
    },
    unitsSelect: {
        flex: 1,
        padding: 5,
    },
    lengthInput: {
        flex: 1,
        borderWidth: 2,
        borderColor: "lightgrey",
        borderStyle: "solid",
    },
    widthInput: {
        flex: 1,
        borderWidth: 2,
        borderColor: "lightgrey",
        borderStyle: "solid",
    },
    productListHeader: {
        flexDirection: "row",
        padding: 5,
    },
    productNameText: {
        paddingLeft: 10,
        paddingRight: 10,
    },
    productItemName: {
        flex: 1,
        backgroundColor: "lightgrey",
        padding: 4,
        margin: 4,
    },
    productAttributesList: {
        margin: 10,
        padding: 10,
        borderWidth: 1,
        borderStyle: "solid",
        borderColor: "black",
    },
})