import { dimensions_t, length_t } from "@/lib/product";
import { StyleSheet, Text, TextInput, View } from "react-native";

export type t_length_unit = "foot" | "inch"

export type MeasurementInputProps = {
    onValueSet?: (d: dimensions_t) => any,
    units: t_length_unit,
    defaultValue: number;
}

export function MeasurementInput({onValueSet, units, defaultValue}: MeasurementInputProps) {

    function doOnValueSet(value : string) {
        onValueSet && onValueSet({
            l: (parseInt(value) || parseFloat(value)),
            u: units,
        })
    }

    return (
        <View>
            <TextInput
                clearTextOnFocus={true}
                defaultValue={new String(defaultValue).valueOf()}
                onChangeText={doOnValueSet}
                inputMode='decimal'
                style={styles.lengthInput} />
            <Text style={styles.unitHints}>{units}</Text>
        </View>
    )
}

const styles = StyleSheet.create({
    unitHints: {
      fontSize: 30,
      padding: 10,
    },
    lengthInput: {
      borderWidth: 1,
      borderRadius: 4,
      borderColor: "grey",
      padding: 4,
      margin: 4,
      fontSize: 30,
      width: 200,
    },
})