import { EGoal, Goals } from "@/model/enums/Enums";
import React, {
  forwardRef,
  ReactElement,
  useImperativeHandle,
  useState,
} from "react";
import { View } from "react-native";
import CheckBox from "../CheckBox";
import {
  AntDesignIconNames,
  CommunityIconNames,
  EntypoIconNames,
  FontAwesome6IconNames,
  IonIconNames,
} from "../Icons";
import Question, { QuestionChildProps } from "./Question";

export interface GoalQuestionRef {
  getAnswer: () => EGoal;
}

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

    interface IData {
      label: string;
      commIcon?: CommunityIconNames;
      antIcon?: AntDesignIconNames;
      entypoIcon?: EntypoIconNames;
      fontAwesomeIcon?: FontAwesome6IconNames;
      ionIcon?: IonIconNames;
    }

    const data: IData[] = [
      { label: "Perte de poids", commIcon: "weight" },
      { label: "Renforcement musculaire", commIcon: "arm-flex-outline" },
      { label: "Prise de masse", ionIcon: "beer-outline" },
      { label: "Amélioration endurance", fontAwesomeIcon: "shield-heart" },
      { label: "Maintenir en forme", antIcon: "linechart" },
    ];

    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 Goals[selected];
      },
    }));

    return (
      <Question
        question="Quel est votre objectif dans l'application ?"
        {...ref}
        {...props}
      >
        <View className="gap-2">
          {data.map((item, index) => (
            <CheckBox
              key={index}
              label={item.label}
              value={checkedItems[index]}
              onChange={() => handleChange(index)}
              fontAwesome6Icon={item.fontAwesomeIcon}
              communityIcon={item.commIcon}
              antIcon={item.antIcon}
              entypoIcon={item.entypoIcon}
              IonIcon={item.ionIcon}
            />
          ))}
        </View>
      </Question>
    );
  }
);