// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import * as React from 'react';
import { useRestoreFocusTarget } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";
import { Dialog } from "@coreai-ds/react-components";
import { DialogSurface } from "@coreai-ds/react-components";
import { DialogBody } from "@coreai-ds/react-components";
import { DialogTitle } from "@coreai-ds/react-components";
import { DialogContent } from "@coreai-ds/react-components";
import { DialogActions } from "@coreai-ds/react-components";
import { DialogTrigger } from "@coreai-ds/react-components";

export const TriggerOutsideDialog = (): JSXElement => {
    const [open, setOpen] = React.useState(false);
    const restoreFocusTargetAttribute = useRestoreFocusTarget();
    return (<>
      <Button 
    // restoreFocusTargetAttribute ensures that focus is restored to this button when the dialog closes
    {...restoreFocusTargetAttribute} onClick={() => {
            // it is the user responsibility to open the dialog
            setOpen(true);
        }}>
        Open Dialog
      </Button>

      <Dialog 
    // this controls the dialog open state
    open={open} onOpenChange={(event, data) => {
            // it is the users responsibility to react accordingly to the open state change
            setOpen(data.open);
        }}>
        <DialogSurface>
          <DialogBody>
            <DialogTitle>Dialog title</DialogTitle>
            <DialogContent>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam exercitationem cumque repellendus eaque
              est dolor eius expedita nulla ullam? Tenetur reprehenderit aut voluptatum impedit voluptates in natus iure
              cumque eaque?
            </DialogContent>

            <DialogActions>
              <Button appearance="primary">Do Something</Button>
              {/* DialogTrigger inside of a Dialog still works properly */}
              <DialogTrigger disableButtonEnhancement>
                <Button appearance="secondary">Close</Button>
              </DialogTrigger>
            </DialogActions>
          </DialogBody>
        </DialogSurface>
      </Dialog>
    </>);
};

export default TriggerOutsideDialog;