import { useGlobal } from 'hooks/useGlobal';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { EmailAccounts } from './EmailAccounts';

/*
  Account management, as a modal rather than a settings page or a panel.

  It was a section in the platform's Settings → Integrations, which a plugin cannot contribute to: a plugin
  contributes panels and nothing else. A panel was the obvious replacement and does not work either —
  `PluginScreen` renders the workspace `locked`, so a panel outside the default layout is unreachable and
  one inside it would spend a quarter of the screen on a form you touch twice a year.

  So it follows Compose, which had already solved the same problem here: a global holds "is it open", any
  panel can set it, and the panel that mounts the modal renders it once.
*/
export const useAccountsModal = () => useGlobal<boolean>('EMAIL_ACCOUNTS_OPEN', false);

export const AccountsModal = () => {
  const [open, setOpen] = useAccountsModal();
  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogContent className="max-h-[85vh] max-w-3xl overflow-y-auto">
        <DialogHeader>
          <DialogTitle>Email accounts</DialogTitle>
        </DialogHeader>
        <EmailAccounts />
      </DialogContent>
    </Dialog>
  );
};