import { ESportLevel, SportLevels } from "@/model/enums/Enums";
import React, { useImperativeHandle, useState } from "react";
import { View } from "react-native";
import Checkbox from "../CheckBox";
import {
  AntDesignIconNames,
  CommunityIconNames,
  EntypoIconNames,
  FontAwesome6IconNames,
} from "../Icons";
import Question, { QuestionChildProps } from "./Question";

export interface ActivityQuestionRef {
  getAnswer: () => ESportLevel;
}

export default React.forwardRef<ActivityQuestionRef, 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 SportLevels[SportLevels.length - 1 - selected];
      },
    }));

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

    const data: IData[] = [
      { label: "Athlète", antIcon: "smile-circle" },
      { label: "Très sportif", antIcon: "smileo" },
      { label: "Un peu sportif", antIcon: "meh" },
      { label: "Peu sportif", antIcon: "frowno" },
      { label: "Pas du tout sportif", antIcon: "frown" },
    ];

    return (
      <Question
        question="Comment estimez-vous votre niveau d'activité ?"
        {...ref}
        {...props}
      >
        <View className="gap-2">
          {data.map((item, index) => (
            <Checkbox
              key={index}
              label={item.label}
              value={checkedItems[index]}
              onChange={() => handleChange(index)}
              antIcon={item.antIcon}
              endText={(data.length - index).toString()}
            />
          ))}
        </View>
      </Question>
    );
  }
);