import { StyleSheet, Text, View } from "react-native";
import { MeasurementInputProps } from "./MeasurementInput";
import MeasurementUnitInput, {
  MeasurementUnitInputProps,
} from "./MeasurementUnitInput";
import { SvgUri } from "react-native-svg";
import { Length } from "convert";

export type HelpfulMeasurementUnitInputParams = MeasurementUnitInputProps & {
  svgUri: string;
  label: string;
  unitChoices?: Length[];
};

export function HelpfulMeasurementUnitInput(
  props: HelpfulMeasurementUnitInputParams
) {
  return (
    <View>
      <SvgUri uri={props.svgUri} width="100px" height="100px" />
      <Text>{props.label}</Text>
      <MeasurementUnitInput
        defaultUnit={props.defaultUnit || "ft"}
        defaultValue={props.defaultValue || 0.0}
        onUnitSet={props.onUnitSet}
        onValueSet={props.onValueSet}
        unitChoices={props.unitChoices}
      />
    </View>
  );
}

const styles = StyleSheet.create({});