import { ESport, Sports } from "@/enum/enum.sport";
import React, {
  forwardRef,
  ReactElement,
  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 SportQuestionRef {
  getAnswer: () => ESport;
}

export default forwardRef<SportQuestionRef, QuestionChildProps>(
  (props, ref): ReactElement => {
    const [checkedItems, setCheckedItems] = useState([
      true,
      ...Array(8).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 Sports[selected];
      },
    }));

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

    const data: IData[] = [
      { label: "Course", fontAwesomeIcon: "person-running" },
      { label: "Marche", fontAwesomeIcon: "person-walking" },
      { label: "Rando", fontAwesomeIcon: "person-hiking" },
      { label: "Skate", commIcon: "skateboarding" },
      { label: "Cyclisme", commIcon: "bike" },
      { label: "Basket", fontAwesomeIcon: "basketball" },
      { label: "Cardio", antIcon: "heart" },
      { label: "Yoga", commIcon: "yoga" },
      { label: "Autre", entypoIcon: "dots-three-horizontal" },
    ];

    return (
      <Question question="Quel sport pratiquez-vous ?" {...ref} {...props}>
        <View className="flex-row justify-center flex-wrap gap-2">
          {data.map((item, index) => (
            <CheckBox
              key={item.label}
              label={item.label}
              value={checkedItems[index]}
              onChange={() => handleChange(index)}
              fontAwesome6Icon={item.fontAwesomeIcon}
              communityIcon={item.commIcon}
              antIcon={item.antIcon}
              entypoIcon={item.entypoIcon}
              direction="col"
            />
          ))}
        </View>
      </Question>
    );
  }
);