import React, { useState } from "react";
import { Image, Text, View } from "react-native";
import { MultiSelect } from "react-native-element-dropdown";
import Question, { QuestionChildProps } from "./Question";

//@ts-ignore
import WheelChair from "@/assets/images/wheelchair.png";
import { EHealthProblem } from "@/model/enums/Enums";

export default React.forwardRef<any, QuestionChildProps>(
  ({ ...props }, ref) => {
    const [selected, setSelected] = useState<string[]>([]);

    type DataItem = {
      label: string;
      value: EHealthProblem;
    };

    const data: DataItem[] = [
      { label: "Arthrose", value: "ARTHROSE" },
      { label: "Migraine", value: "MIGRAINE" },
    ];

    const renderItem = (item: { label: string }) => {
      return (
        <View className="p-4">
          <Text>{item.label}</Text>
        </View>
      );
    };

    return (
      <Question
        question="Avez-vous des problèmes physiques ?"
        {...props}
        {...ref}
      >
        <Image className="self-center" source={WheelChair} alt="" />
        <View className="border-2 border-orange-500 rounded-3xl p-4">
          <MultiSelect
            data={data}
            labelField="label"
            valueField="value"
            placeholder="Selectionnez un problème physique "
            searchPlaceholder="Search..."
            value={selected}
            onChange={setSelected}
            renderItem={renderItem}
          />
        </View>
      </Question>
    );
  }
);