Mobile/components/quiz/SleepQuestion.tsx

import { ESleepLevel, SleepLevels } from "@/model/enums/Enums";
import React, { useImperativeHandle, useState } from "react";
import { View } from "react-native";
import Checkbox from "../CheckBox";
import { AntDesignIconNames } from "../Icons";
import Question, { QuestionChildProps } from "./Question";

export interface SleepQuestionRef {
  getAnswer: () => ESleepLevel;
}

export default React.forwardRef<SleepQuestionRef, QuestionChildProps>(
  ({ ...props }, ref): React.ReactElement => {
    const [checkedItems, setCheckedItems] = useState([
      true,
      ...Array(4).fill(false),
    ]);

    const handleChange = (index: number) => {
      const newCheckedState = checkedItems.map((_, i) => i === index);
      setCheckedItems(newCheckedState);
    };

    useImperativeHandle(ref, () => ({
      getAnswer: () => {
        let selected = 0;
        checkedItems.forEach((item, index) => {
          if (item) {
            selected = index;
          }
        });
        return SleepLevels[SleepLevels.length - 1 - selected];
      },
    }));

    interface IData {
      label: string;
      icon: AntDesignIconNames;
      endText: string;
    }

    const data: IData[] = [
      {
        label: "Excellent",
        icon: "smile-circle",
        endText: ">8 heures",
      },
      {
        label: "Bien",
        icon: "smileo",
        endText: "7-8 heures",
      },
      {
        label: "Mauvaise",
        icon: "meh",
        endText: "6-7 heures",
      },
      {
        label: "Très mauvaise",
        icon: "frowno",
        endText: "3-4 heures",
      },
      {
        label: "Insomniaque",
        icon: "frown",
        endText: "<2 heures",
      },
    ];

    return (
      <Question
        question="Quelle est la qualité de votre sommeil ?"
        {...ref}
        {...props}
      >
        <View className="gap-2">
          {data.map((item, index) => (
            <Checkbox
              key={index}
              label={item.label}
              value={checkedItems[index]}
              onChange={() => handleChange(index)}
              antIcon={item.icon}
              endText={item.endText}
            />
          ))}
        </View>
      </Question>
    );
  }
);