PliWould/components/CarpetRollCalculator.tsx

import { useEffect, useState } from "react";
import { View, Text, StyleSheet } 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";

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

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 (
    <View style={styles.container}>
      <View>
        {selectedProduct ? (
          <AreaRugTag dimensions={rugDimensions} product={selectedProduct} />
        ) : (
          <Text style={styles.placeholder}>Please Select a Product</Text>
        )}
      </View>
      <View style={{ flex: 1, }}>
        <ScrollView>
          <View style={styles.inputFields}>
            <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 style={styles.container}>
            <ProductList
              onProductSelected={setSelectedProduct}
              productType="area_rug"
            />
          </View>
        </ScrollView>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexGrow: 1,
    flex: 1,
  },
  placeholder: {
    alignContent: "center",
    alignSelf: "center",
    paddingTop: 50,
    paddingBottom: 50,
    fontSize: 30,
  },
  inputFieldWrapper: {
    padding: 10,
  },
  inputFields: {},
  label: {
    flex: 1,
    flexDirection: "row",
  },
  numberInput: {
    flexDirection: "row",
    borderStyle: "solid",
    borderColor: "black",
    borderWidth: 1,
  },
});

export default CarpetRollCalculator;