const { Sidebar, Inbox, Reader, CommandPalette, AgentPanel, Compose, Tweaks } = window;

function App() {
  const [selectedId, setSelectedId] = React.useState('m1');
  const [cmdOpen, setCmdOpen] = React.useState(false);
  const [agentOpen, setAgentOpen] = React.useState(false);
  const [composeOpen, setComposeOpen] = React.useState(false);

  React.useEffect(() => {
    const onKey = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
        e.preventDefault();
        setCmdOpen(o => !o);
      } else if (e.key === 'c' && !e.metaKey && !e.ctrlKey && document.activeElement?.tagName !== 'INPUT' && document.activeElement?.tagName !== 'TEXTAREA') {
        setComposeOpen(true);
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  return (
    <>
      <div className="app" data-screen-label="01 Relay Inbox">
        <Sidebar
          onCompose={() => setComposeOpen(true)}
          onOpenCommand={() => setCmdOpen(true)}
          onOpenAgent={() => setAgentOpen(true)}
        />
        <Inbox selectedId={selectedId} onSelect={setSelectedId} />
        <Reader mailId={selectedId} onOpenAgent={() => setAgentOpen(true)} />
      </div>

      {agentOpen && <AgentPanel onClose={() => setAgentOpen(false)} />}
      {cmdOpen && <CommandPalette onClose={() => setCmdOpen(false)} />}
      {composeOpen && <Compose onClose={() => setComposeOpen(false)} />}

      <Tweaks />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);