import React,{useEffect,useRef} from 'react';

export default function ContextTransitionDialog({busy,error,onSave,onDiscard,onCancel}) {
    const root=useRef(null);
    useEffect(()=>{
        const previous=document.activeElement;
        root.current?.querySelector('button')?.focus();
        return ()=>previous?.isConnected&&previous.focus();
    },[]);
    function keyboard(e){
        if(e.key==='Escape'&&!busy){e.preventDefault();onCancel();}
        if(e.key!=='Tab')return;
        const controls=[...root.current.querySelectorAll('button:not(:disabled)')];
        if(!controls.length){e.preventDefault();return;}
        if(e.shiftKey&&document.activeElement===controls[0]){e.preventDefault();controls.at(-1).focus();}
        else if(!e.shiftKey&&document.activeElement===controls.at(-1)){e.preventDefault();controls[0].focus();}
    }
    return <div className="context-transition-backdrop"><section ref={root} className="panel context-transition-dialog" role="dialog" aria-modal="true" aria-labelledby="context-transition-title" onKeyDown={keyboard}><h2 id="context-transition-title">Alterações por guardar</h2><p>Guarde as alterações, descarte-as ou cancele a mudança de contexto. Guardar usa o formulário e as validações actuais.</p>{error&&<p role="alert">{error}</p>}<div className="actions"><button disabled={busy} onClick={onSave}>Guardar e continuar</button><button disabled={busy} onClick={onDiscard}>Descartar e continuar</button><button disabled={busy} onClick={onCancel}>Cancelar</button></div></section></div>;
}