import React from "react";
import Question, { QuestionChildProps } from "./Question";
import Slider from "../ui/Slider";
import Text from "../ui/Text";
import { View } from "react-native";
import SegmentedControl from "../ui/SegmentedControl";

export default React.forwardRef<any, QuestionChildProps>(
  (props, ref): React.ReactElement => {
    const MIN_HEIGHT = 120;
    const MAX_HEIGHT = 250;
    const UNITS = ["cm", "inch"];
    const [height, setHeight] = React.useState(MIN_HEIGHT);
    const [unit, setUnit] = React.useState("cm");
    return (
      <Question question="Quel est votre taille ?" {...ref} {...props}>
        <SegmentedControl
          values={UNITS}
          selectedIndex={UNITS.indexOf(unit)}
          onValueChange={setUnit}
        />
        <View className="flex-row justify-center">
          {height <= MIN_HEIGHT ? (
            <Text className="mt-8" size="4xl">
              - de
            </Text>
          ) : null}
          {height >= MAX_HEIGHT ? (
            <Text className="mt-8" size="4xl">
              + de
            </Text>
          ) : null}
          <Text size="8xl" weight="bold">
            {height}
          </Text>
          <Text className="mt-8" size="4xl">
            {unit}
          </Text>
        </View>
        <Slider
          minimumValue={MIN_HEIGHT}
          maximumValue={MAX_HEIGHT}
          onValueChange={setHeight}
        />
      </Question>
    );
  }
);