PliWould/components/CarpetRollCalculator.tsx

import { useEffect, useState } from "react";
import { View, Text, StyleSheet, StatusBar, Dimensions, useWindowDimensions } from "react-native";
import { Product } from "@/lib/product";
import { selectProducts } from "@/features/product/productSlice";
import { area_t, diameterToLength, length_t } from "@/lib/dimensions";
import { useAppSelector } from "../app/store";
import { AreaRugTag } from "@/components/AreaRugTag";
import convert, { Length } from "convert";
import ProductList from "@/components/ProductList";
import { HelpfulMeasurementUnitInput } from "./HelpfulMeasurementInput";
import { ScrollView } from "react-native-gesture-handler";
import { SafeAreaView } from "react-native-safe-area-context";

const DEFAULT_DIAMETER_UNIT: Length = "in";
const DEFAULT_LENGTH_UNIT: Length = "ft";

const screenDimensions = Dimensions.get('screen');
const windowDimensions = Dimensions.get('window');

export const CarpetRollCalculator = () => {
  const products = useAppSelector(selectProducts);

  const [width, setWidth] = useState(0);
  const [outerDiameter, setOuterDiameter] = useState<length_t>({
    l: 0,
    u: DEFAULT_DIAMETER_UNIT,
  });
  const [innerDiameter, setInnerDiameter] = useState<length_t>({
    l: 0,
    u: DEFAULT_DIAMETER_UNIT,
  });
  const [numRings, setNumRings] = useState(0);
  const [rugDimensions, setRugDimensions] = useState<area_t>({
    u: DEFAULT_LENGTH_UNIT,
    w: 0,
    l: 0,
  });
  const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);
  const [units, setUnits] = useState<Length>(DEFAULT_LENGTH_UNIT);

  useEffect(() => {
    // convert the "diameter" units to the length unit.

    const outerD2Value = convert(outerDiameter.l, outerDiameter.u).to(units);
    const innerD2Value = convert(innerDiameter.l, innerDiameter.u).to(units);

    const innerD2 = {
      l: innerD2Value,
      u: units,
    };
    const outerD2 = {
      l: outerD2Value,
      u: units,
    };

    const l = diameterToLength(outerD2, innerD2, numRings).l;

    const dimens = {
      l,
      w: width || selectedProduct?.dimensions.l || 0.0,
      u: units || selectedProduct?.dimensions.u || "ft",
    };
    console.dir(dimens);
    setRugDimensions(dimens);
  }, [outerDiameter, innerDiameter, width, numRings, selectedProduct, units]);

  return (
    <SafeAreaView style={styles.container}>
    <View style={styles.placeholder}>
      {selectedProduct ? (
        <AreaRugTag dimensions={rugDimensions} product={selectedProduct} />
      ) : (
        <Text style={styles.placeholderText}>Please Select a Product</Text>
      )}
    </View>
      <ScrollView style={styles.scrollView}>
        <View>
          <View style={styles.inputFieldWrapper}>
            <HelpfulMeasurementUnitInput
              label="Length"
              svgUri="/assets/images/icons/carpet-roll-length-raw.svg"
              onUnitSet={setUnits}
              onValueSet={setWidth}
              defaultValue={width}
              defaultUnit={units}
              unitChoices={["ft", "in"]}
            />
          </View>
          <View style={styles.inputFieldWrapper}>
            <HelpfulMeasurementUnitInput
              label="Inner diameter"
              svgUri="/assets/images/icons/carpet-roll-length-inner-diameter-raw.svg"
              onUnitSet={(u) => setInnerDiameter({ ...innerDiameter, u })}
              defaultValue={innerDiameter.l}
              defaultUnit={innerDiameter.u}
              unitChoices={["ft", "in"]}
              onValueSet={(l) => setInnerDiameter({ ...innerDiameter, l })}
            />
          </View>
          <View style={styles.inputFieldWrapper}>
            <HelpfulMeasurementUnitInput
              label="Outer diameter"
              svgUri="/assets/images/icons/carpet-roll-length-outer-diameter-raw.svg"
              onUnitSet={(u) => setOuterDiameter({ ...outerDiameter, u })}
              defaultValue={innerDiameter.l}
              defaultUnit={innerDiameter.u}
              unitChoices={["ft", "in"]}
              onValueSet={(l) => setOuterDiameter({ ...outerDiameter, l })}
            />
          </View>
          <View style={styles.inputFieldWrapper}>
            <HelpfulMeasurementUnitInput
              label="Number of rings"
              svgUri="/assets/images/icons/carpet-roll-length-number-of-rings-raw.svg"
              defaultValue={0}
              onValueSet={setNumRings}
            />
          </View>
        </View>
        <View>
          <ProductList
            onProductSelected={setSelectedProduct}
            productType="area_rug"
          />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: StatusBar.currentHeight,
  },
  scrollView: {
    marginHorizontal: 20,
    height: windowDimensions.height - 50,
  },
  placeholder: {
    alignContent: "center",
    alignSelf: "center",
    height: 300,
    paddingTop: 40,
    paddingBottom: 40,
    fontSize: 30,
    position: "static",
  },
  placeholderText: {
    fontSize: 30,
    paddingVertical: 70,
  },
  inputFieldWrapper: {
    // padding: 10,
  },
  inputFields: {},
  label: {
    flex: 1,
    flexDirection: "row",
  },
  numberInput: {
    flexDirection: "row",
    borderStyle: "solid",
    borderColor: "black",
    borderWidth: 1,
  },
});

export default CarpetRollCalculator;