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

/*
  Sync setup, 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 fifth of the screen on a form you touch twice a year.

  So it follows the email plugin, which had already solved exactly this: a global holds "is it open", any
  panel can set it, and the panel that mounts the modal renders it once.
*/
export const useAppPasswordsModal = () => useGlobal<boolean>('CALDAV_APP_PASSWORDS_OPEN', false);

export const AppPasswordsModal = () => {
  const [open, setOpen] = useAppPasswordsModal();
  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogContent className="max-h-[85vh] max-w-3xl overflow-y-auto">
        <DialogHeader>
          <DialogTitle>Sync to your phone</DialogTitle>
        </DialogHeader>
        <AppPasswords />
      </DialogContent>
    </Dialog>
  );
};