83 lines
3.0 KiB
TypeScript
83 lines
3.0 KiB
TypeScript
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; |