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

import type { JSXElement } from "@coreai-ds/react-components";
import * as React from 'react';
import { makeStyles } from "@coreai-ds/react-components";
import { tokens } from "@coreai-ds/react-components";
import { useRestoreFocusTarget } from "@coreai-ds/react-components";
import { useRestoreFocusSource } from "@coreai-ds/react-components";
import { OverlayDrawer } from "@coreai-ds/react-components";
import { DrawerHeader } from "@coreai-ds/react-components";
import { DrawerHeaderTitle } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";
import { Dismiss24Regular } from "@fluentui/react-icons";
import { DrawerBody } from "@coreai-ds/react-components";

const useStyles = makeStyles({
    root: {
        display: 'flex',
        alignItems: 'flex-start',
        gap: tokens.spacingHorizontalL,
    },
    container: {
        width: '500px',
        height: '300px',
        padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalL}`,
        position: 'relative',
        overflow: 'hidden',
        border: `${tokens.strokeWidthThicker} solid ${tokens.colorNeutralStroke1}`,
        backgroundColor: tokens.colorBrandBackground2,
    },
});

export const OverlayInsideContainer = (): JSXElement => {
    const [isOpen, setIsOpen] = React.useState(false);
    const ref = React.useRef<HTMLDivElement>(null);
    const styles = useStyles();
    // all Drawers need manual focus restoration attributes
    // unless (as in the case of some inline drawers, you do not want automatic focus restoration)
    const restoreFocusTargetAttributes = useRestoreFocusTarget();
    const restoreFocusSourceAttributes = useRestoreFocusSource();
    return (<div className={styles.root}>
      <div className={styles.container} ref={ref}>
        <OverlayDrawer as="aside" {...restoreFocusSourceAttributes} mountNode={ref.current} open={isOpen} onOpenChange={(_, { open }) => setIsOpen(open)}>
          <DrawerHeader>
            <DrawerHeaderTitle action={<Button appearance="subtle" aria-label="Close" icon={<Dismiss24Regular />} onClick={() => setIsOpen(false)}/>}>
              Overlay Drawer
            </DrawerHeaderTitle>
          </DrawerHeader>

          <DrawerBody>
            <p>Drawer content</p>
          </DrawerBody>
        </OverlayDrawer>

        <p>Drawer will be rendered within this container</p>
      </div>

      <Button {...restoreFocusTargetAttributes} appearance="primary" onClick={() => setIsOpen(true)}>
        Open Drawer
      </Button>
    </div>);
};

export default OverlayInsideContainer;