PliWould/components/ProductCalculatorSelector.tsx

import { useAppSelector } from '@/app/store';
import { selectProducts } from '@/features/product/productSlice';
import { Product, dimensions_t } from '@/lib/product';
import { useState, useEffect } from 'react';
import { View, Text, TextInput, Button, FlatList, StyleSheet } from 'react-native';
import { TouchableHighlight } from 'react-native-gesture-handler';
import { SafeAreaView } from 'react-native-safe-area-context';
import PriceDisplay from './Price';
import { AreaInput } from './AreaInput';
import { MeasurementInput } from './MeasurementInput';


export default function ProductCalculatorSelector() {

    const products = useAppSelector(selectProducts);
    const [activeProduct, setActiveProduct] = useState(null as Product | null);
    const [price, setPrice] = useState(0);
    const [measurement, setMeasurement] = useState(null as dimensions_t | null);

    useEffect(function () {
        const iv = setInterval(function () {
            if (!(activeProduct && measurement)) return;
            setPrice(
                activeProduct.priceFor(measurement)
            )
        }, 50);
        return function () {
            clearInterval(iv);
        };
    }, [activeProduct, measurement]);

    function onMeasurementSet(dimensions: dimensions_t) {
        setMeasurement(dimensions);
    }

    return (
        <SafeAreaView style={styles.wrapper}>
            <PriceDisplay price={price} />
            <View style={styles.inputAndUnitWrapper}>
                <View style={styles.inputWrapper}>
                    {
                        activeProduct ? (
                            "w" in activeProduct.dimensions ?
                                <AreaInput
                                    units={units}
                                    onMeasurementSet={onMeasurementSet}
                                />
                                :
                                <MeasurementInput
                                    defaultValue={activeProduct.dimensions.l}
                                    units={units}
                                    onValueSet={onMeasurementSet}
                                />

                        ) : (
                            <Text>Please select a product</Text>
                        )
                    }
                </View>
            </View>

        </SafeAreaView>
    );
}


export const styles = StyleSheet.create({
    wrapper: {
    },
    bigPriceWrapper: {
        alignContent: "center",
    },
    bigPrice: {
        alignSelf: "center",
        fontSize: 40,
        marginTop: 100,
        marginBottom: 100,
    },
    inputWrapper: {
        flexDirection: "row",
        alignItems: "flex-start",
    },
    unitSelector: {
    },
    inputAndUnitWrapper: {
        flexDirection: "row",
        alignSelf: "center",
    },
    widthInput: {
        width: 200,
        borderWidth: 1,
        borderRadius: 4,
        borderColor: "grey",
        padding: 4,
        margin: 4,
        fontSize: 30,
    },
    activeProduct: {
        borderWidth: 2,
        borderColor: "black",
        borderStyle: "solid",
    },
    inactiveProduct: {

    },
    titleContainer: {
        flexDirection: 'row',
        gap: 8,
    },
    stepContainer: {
        gap: 8,
        marginBottom: 8,
    },
    reactLogo: {
        height: 178,
        width: 290,
        bottom: 0,
        left: 0,
    },
    productTileTouchable: {
        margin: 10,
        padding: 20,
        backgroundColor: "grey",
    },

    productTileTouchableActive: {
        borderWidth: 2,
        borderStyle: "solid",
        borderColor: "black",
        margin: 10,
        padding: 20,
    },

    productTileText: {
        textAlign: "center",
        color: "white",
    },

    productTileTextActive: {
        textAlign: "center",
        color: "black",
    },

    productTileCover: {
        padding: 4,
    },

});