import React, { useEffect, useState } from "react";
import { View, Text, TextInput, Button, StyleSheet } from "react-native";
import {
  productPriceFor,
  priceDisplay,
  pricePerUnitDisplay,
  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 { Length } from "convert";
import ProductList from "@/components/ProductList";

const DEFAULT_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_UNIT,
  });
  const [innerDiameter, setInnerDiameter] = useState<length_t>({
    l: 0,
    u: DEFAULT_UNIT,
  });
  const [numRings, setNumRings] = useState(0);
  const [price, setPrice] = useState(0);
  const [rugDimensions, setRugDimensions] = useState<area_t>({
    u: DEFAULT_UNIT,
    w: 0,
    l: 0,
  });
  const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);
  const [units, setUnits] = useState<Length>(DEFAULT_UNIT);

  useEffect(() => {
    console.log(`recalculating...`);
    const dimens = {
      l: diameterToLength(outerDiameter, innerDiameter, numRings).l || 0.0,
      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}>
      {selectedProduct && (
        <AreaRugTag dimensions={rugDimensions} product={selectedProduct} />
      )}
      <View>
        <Text>Length Calculation</Text>
        <View>
          <Text>Outer Diameter:</Text>
          <TextInput
            aria-label="outer diameter"
            onChangeText={(text) =>
              setOuterDiameter({ l: Number(text), u: units })
            }
          />
          <Text>Inner Diameter:</Text>
          <TextInput
            aria-label="inner diameter"
            onChangeText={(text) =>
              setInnerDiameter({ l: Number(text), u: units })
            }
          />
          <Text>Number of rings:</Text>
          <TextInput
            aria-label="number of rings"
            onChangeText={(text) => setNumRings(Number(text))}
          />
        </View>
      </View>
      <View>
        <Text>Width:</Text>
        <TextInput
          aria-label="width"
          onChangeText={(text) => setWidth(Number(text))}
        />
      </View>
      <Text>Price: {priceDisplay(price)}</Text>
      <Text>
        {selectedProduct ? pricePerUnitDisplay(selectedProduct) : "0.00"}
      </Text>
      <View style={styles.container}>
        <ProductList onProductSelected={setSelectedProduct} />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    padding: 20,
  },
});

export default CarpetRollCalculator;