PliWould/app/(tabs)/index.tsx

import { Image, StyleSheet, Platform, ImageBackground, View, Text, Button, TextInputKeyPressEventData } 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 { ProductTile } from '@/components/ProductTile';
import { useEffect, useState } from 'react';
import { TextInput, TouchableHighlight } from 'react-native-gesture-handler';

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");

  function calculatePrice() {
    if (!activeProduct) {
      setPrice("0.00");
      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);
  }

  const onProductSelected = (product: Product) => {
    setActiveProduct(product);
    calculatePrice();
  }

  const onUnitPressed = (u : "ft" | "in") => {
    setUnits(u);
    calculatePrice();
  }

  const onLengthChanged = (value : string) => {
    setLength(value);
    calculatePrice();
  }

  const onWidthChanged = (width : string) => {
    setWidth(width);
    calculatePrice();
  }

  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}
              defaultValue={length}
              onChangeText={onLengthChanged}
              inputMode='decimal'
              style={styles.lengthInput}
            />
            <Text style={styles.unitHints}>{units}</Text>
            {activeProduct.area && 

          (<View><TextInput
            clearTextOnFocus={true}
            defaultValue={width}
            onPressIn={() => calculatePrice()}
            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={() => onUnitPressed("in")} color={units === "in" ? "gray" : "blue"} />
            <Button title="ft" onPress={() => onUnitPressed("ft")} color={units === "ft" ? "gray" : "blue"} />
          </View>
      </View>
      {products.map((product) => {
        return (
          <TouchableHighlight onPress={() => setActiveProduct(product)} >
            <View
              style={product.id === activeProduct?.id ? styles.activeProduct : styles.inactiveProduct}>
              <ProductTile product={product} onProductSelected={onProductSelected} />
            </View>
          </TouchableHighlight>
        )
      })}
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  wrapper: {
    padding: 10,
    alignItems: "center",
  },
  bigPriceWrapper: {
    alignContent: "center",
  },
  bigPrice: {
    alignSelf: "center",
    fontSize: 40,
    marginTop: 100,
    marginBottom: 100,
  },
  inputWrapper: {
    flexDirection: "row",
  },
  unitSelector: {
  },
  inputAndUnitWrapper: {
    flexDirection: "row",
  },
  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',
    alignItems: 'center',
    gap: 8,
  },
  stepContainer: {
    gap: 8,
    marginBottom: 8,
  },
  reactLogo: {
    height: 178,
    width: 290,
    bottom: 0,
    left: 0,
    position: 'absolute',
  },
});