import { View } from "react-native-reanimated/lib/typescript/Animated";
import { MeasurementInput } from "./MeasurementInput";
import { area_t, dimensions_t } from "@/lib/product";
import { useState } from "react";

export type AreaInputProps = {
    units: "foot" | "inch",
    onMeasurementSet?: (area : dimensions_t) => any,
}

export function AreaInput({units, onMeasurementSet} : AreaInputProps) {

    const [area, setArea] = useState({
        l: 0,
        w: 0,
        u: "foot",
    } as area_t)

    function doOnLengthSet(measurement : dimensions_t) {
        setArea({
            ...area,
            l: measurement.l
        });
        onMeasurementSet && onMeasurementSet(area);
    }

    function doOnWidthSet(measurement : dimensions_t) {
        setArea({
            ...area,
            w: measurement.l
        });
        onMeasurementSet && onMeasurementSet(area);
    }

    return (
        <View>
            <MeasurementInput
                units={units}
                defaultValue={area.l}
                onValueSet={doOnLengthSet}
            />
            <MeasurementInput
                units={units}
                defaultValue={area.w}
                onValueSet={doOnWidthSet}
            />
        </View>
    )
}