import useTaxonomyContext from "@/components/providers/taxonomy-provider/hook";
import getCategoryOptions from "@/utils/get-category-options";
import { useState } from "react";
import { View } from "react-native";
import { useToast } from "react-native-toast-notifications";
import { ButtonText } from "../button";
import CustomButton from "../custom-button";
import CustomSelect from "../custom-select";
import { ThemedText } from "../themed-text";

interface RandomTestFormProps {
  onStartRandomTest?: (min: number, max: number, catId: number) => void; 
  isLoading?: boolean;
}

const RandomTestForm = ({ onStartRandomTest, isLoading }: RandomTestFormProps) => {
  const [minDifficulty, setMinDifficulty] = useState(0);
  const [maxDifficulty, setMaxDifficulty] = useState(10);
  const [categoryId, setCategoryId] = useState<number|undefined>(undefined);
  const { categories } = useTaxonomyContext();
  const toast = useToast();

  const catOptions = getCategoryOptions(categories);
  const minOptions = Array.from({ length: 9 }, (_, i) => {
    return { label: String(i), value: String(i) };
  });
  const maxOptions = Array.from({ length: 10 }, (_, i) => {
    return { label: String(i), value: String(i) };
  });

  const handleStartRandomTest = () => {
    if(minDifficulty >= maxDifficulty) {
      toast.show("Minimum difficulty must be less than maximum difficulty.", { type: "danger" });
      return;
    }
    if(categoryId === undefined) {
      toast.show("Category must be selected", { type: "danger" });
      return;
    }
    onStartRandomTest?.(minDifficulty, maxDifficulty, categoryId);
  }
  const handleSelect = (setStateFunction: (v: number) => void, value: string) => {
    const valueNum = +value;
    setStateFunction(valueNum);
  }
  
  return (
    <View>
      <View className="flex-row gap-3 mb-3">
        <View className="flex-1">
          <ThemedText className="mb-1" type="defaultSemiBold">Min Difficulty</ThemedText>
          <CustomSelect
            options={minOptions}
            selectedValue={String(minDifficulty)}
            onValueChange={(value) => handleSelect(setMinDifficulty, value)}
          />
        </View>
        <View className="flex-1">
          <ThemedText className="mb-1" type="defaultSemiBold">Max Difficulty</ThemedText>
          <CustomSelect
            options={maxOptions}
            selectedValue={String(maxDifficulty)}
            onValueChange={(value) => handleSelect(setMaxDifficulty, value)}
          />
        </View>
      </View>
      <View className="mb-3">
        <ThemedText className="mb-1" type="defaultSemiBold">Category</ThemedText>
        <CustomSelect 
          options={catOptions}
          placeholder="Select category"
          onValueChange={(value) => handleSelect(setCategoryId, value)}

        />
      </View>
      <CustomButton isLoading={isLoading} onPress={() => handleStartRandomTest()}>
        <ButtonText>Start test</ButtonText>
      </CustomButton>
    </View>
  )
}

export default RandomTestForm;