PliWould/app/(tabs)/index.tsx

import { Image, StyleSheet, Platform, ImageBackground, View, Text, Button, TextInputKeyPressEventData, TextInput, FlatList } from 'react-native';

import { SafeAreaView } from 'react-native-safe-area-context';
import { useAppSelector } from '../store';
import { selectProducts } from '@/features/product/productSlice';
import { Product, dimensions_t } from '@/lib/product';
import { useEffect, useState } from 'react';
import { TouchableHighlight } from 'react-native-gesture-handler';

const fallbackImage = require("@/assets/images/board-stock-lightened-blurred.png");

export default function HomeScreen() {

  const products = useAppSelector(selectProducts);
  const [activeProduct, setActiveProduct] = useState(null as Product | null);
  const [price, setPrice] = useState("0.00");
  const [length, setLength] = useState("0");
  const [width, setWidth] = useState("0");
  const [units, setUnits] = useState("in" as "ft" | "in");

  useEffect(function () {
    const iv = setInterval(function () {
      if (!activeProduct) return;
      const l = Number.parseInt(length);
      const w = Number.parseInt(width);
      console.log("l=%d, w=%d", l, w);
      const u = units;
      const d: dimensions_t = activeProduct.area ? { l, w, u } : { l, u };
      const p = activeProduct.priceFor(d);
      console.log("set price %s", p);
      const s = p.toLocaleString(undefined, {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2,
      })
      setPrice(s == "NaN" ? "0.00" : s);
    }, 10);
    return function () {
      clearInterval(iv);
    }
  }, [activeProduct, length, width]);

  return (
    <SafeAreaView style={styles.wrapper}>
      <View style={styles.bigPriceWrapper}>
        <Text style={styles.bigPrice}>$ {price}</Text>
      </View>
      <View style={styles.inputAndUnitWrapper}>
        <View style={styles.inputWrapper}>
          {activeProduct ? (
            <View>
              <TextInput
                clearTextOnFocus={true}
                onChangeText={setLength}
                inputMode='decimal'
                style={styles.lengthInput}
              />
              <Text style={styles.unitHints}>{units}</Text>
              {activeProduct.area && (
                <View>
                  <TextInput
                    clearTextOnFocus={true}
                    defaultValue={width}
                    onChangeText={setWidth}
                    inputMode='decimal'
                    style={styles.widthInput}
                  />
                  <Text style={styles.unitHints}>{units}</Text>
                </View>)
              }
            </View>
          ) : (<Text>Please choose a product</Text>)}
        </View>
        <View style={styles.unitSelector}>
          <Button title="in" onPress={() => setUnits("in")} color={units === "in" ? "gray" : "blue"} />
          <Button title="ft" onPress={() => setUnits("ft")} color={units === "ft" ? "gray" : "blue"} />
        </View>
      </View>
      <FlatList
        data={products}
        style={styles.productSelectorFlatList}
        renderItem={({ item }) => {
          return (
            <TouchableHighlight
              style={item === activeProduct ? styles.productTileTouchableActive : styles.productTileTouchable}
              onPress={() => setActiveProduct(item)}>
                  <Text style={item === activeProduct ? styles.productTileTextActive : styles.productTileText}>{item.attributes.name || `Product ${item.id}`}</Text>
            </TouchableHighlight>
          )
        }}
      />

    </SafeAreaView>
  );
}

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",
  },
  unitHints: {
    fontSize: 30,
    padding: 10,
  },
  lengthInput: {
    borderWidth: 1,
    borderRadius: 4,
    borderColor: "grey",
    padding: 4,
    margin: 4,
    fontSize: 30,
    width: 200,
  },
  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,
  },

  productSelectorFlatList: {
    padding: 10,
    margin: 10,
  },

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

});