import { Settings } from "@/app/lib/settings"
import { WHISPER_MODELS } from "@/app/lib/whisper"
import { Picker } from "@react-native-picker/picker"
import { useEffect, useState } from "react"
import { Pressable, View } from "react-native"

const WhisperDownloader = () => {

    const [whisperModel, setWhisperModel] = useState<string|undefined>();

    useEffect(() => {
        const settings = await Settings.getDefault();
        setWhisperModel((await settings.getWhisperModel()) || "small");
    }, [])

    return (
        <View>
            <Picker
            selectedValue={whisperModel || ""}
            style={{ height: 50, width: "100%" }}
            onValueChange={setWhisperModel}
            accessibilityHint="whisper model"
        >
            {Object.entries(WHISPER_MODELS).map(([key, { label }]) => (
            <Picker.Item key={key} label={label} value={key} />
            ))}
        </Picker>

        <WhisperDownloadButton whisperModel={whisperModel} />

        <WhisperDownloadInfo whisperModel={whisperModel} />
  </View>
}