import { useData } from '../util/useData.jsx';


export function Settings(){

    const {data, read, write, openFile} = useData();

    function onSubmit(e){
        e.preventDefault();
        const formData = new FormData(e.target);
        const towrite = {};
        formData.forEach((value, key) => {
            towrite[key] = value;
        });

        console.log('Form submitted:', towrite);

        write(towrite);
    }



    return (
        <main className="">
            
            <form className='flex flex-col gap-4 overflow-hidden' onSubmit={onSubmit}>

                <div className='flex flex-row gap-2 self-end'>
                    <button type="button" onClick={read}>read</button>
                    <button type="submit">write</button>
                    <button type="button" onClick={openFile}>open</button>
                </div>
                <div className='flex-1 overflow-y-auto'>
                    {data && Object.entries(data).map(([key, value], index) => (
                        <div key={index} className='flex flex-col gap-1 flex-1'>
                            <label className='bg-gray-200 self-start px-2'>{key}</label>
                            {["speech_idle_time","vad_threshold","vad_silence_ms","stt_max_segment_ms","speech_flush_lead","stt_warmup_lead"].includes(key) ? (
                                <input name={key} type='number' step='any' defaultValue={value} className='border'></input>
                            ):(
                                <textarea name={key} defaultValue={value} className='border flex-1'></textarea>                        
                            )}
                        </div> 
                    ))}     
                </div>
            </form>  
        </main>
    );
}