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

const MIN_WEIGHT = 40;
const MAX_WEIGHT = 200;

export interface WeightQuestionRef {
  getAnswer: () => number;
}

const WeightQuestion = forwardRef<WeightQuestionRef, QuestionChildProps>(
  (props, ref): ReactElement => {
    const UNITS = ["kg", "lb"];
    const [answer, setAnswer] = useState<number>(MIN_WEIGHT);
    const [unit, setUnit] = useState<string>("kg");

    useImperativeHandle(ref, () => ({
      getAnswer: () => answer,
    }));

    return (
      <Question question="Quel est votre poids ?" {...props}>
        <SegmentedControl
          values={UNITS}
          selectedIndex={UNITS.indexOf(unit)}
          onValueChange={setUnit}
        />
        <View className="flex-row justify-center gap-2">
          {answer <= MIN_WEIGHT && (
            <Text className="mt-8" size="4xl">
              - de
            </Text>
          )}
          {answer >= MAX_WEIGHT && (
            <Text className="mt-8" size="4xl">
              + de
            </Text>
          )}
          <Text size="8xl" weight="bold">
            {answer}
          </Text>
          <Text className="mt-8" size="4xl">
            {unit}
          </Text>
        </View>
        <Slider
          minimumValue={MIN_WEIGHT}
          maximumValue={MAX_WEIGHT}
          onValueChange={setAnswer}
        />
      </Question>
    );
  }
);

export default WeightQuestion;