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

import type { JSXElement } from "@coreai-ds/react-components";
import { makeStyles } from "@coreai-ds/react-components";
import * as React from 'react';
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 { DrawerHeaderNavigation } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";
import { ArrowLeft24Regular } from "@fluentui/react-icons";
import { Toolbar } from "@coreai-ds/react-components";
import { ToolbarGroup } from "@coreai-ds/react-components";
import { ToolbarButton } from "@coreai-ds/react-components";
import { ArrowClockwise24Regular } from "@fluentui/react-icons";
import { Settings24Regular } from "@fluentui/react-icons";
import { Dismiss24Regular } from "@fluentui/react-icons";
import { DrawerHeaderTitle } from "@coreai-ds/react-components";
import { DrawerBody } from "@coreai-ds/react-components";

const useStyles = makeStyles({
    header: {
        display: 'flex',
        justifyContent: 'space-between',
    },
});

export const WithNavigation = (): JSXElement => {
    const styles = useStyles();
    const [isOpen, setIsOpen] = React.useState(false);
    // 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>
      <OverlayDrawer position="start" {...restoreFocusSourceAttributes} open={isOpen} onOpenChange={(_, { open }) => setIsOpen(open)}>
        <DrawerHeader>
          <DrawerHeaderNavigation className={styles.header}>
            <Button aria-label="Back" appearance="subtle" icon={<ArrowLeft24Regular />}/>
            <Toolbar>
              <ToolbarGroup>
                <ToolbarButton aria-label="Reload content" appearance="subtle" icon={<ArrowClockwise24Regular />}/>
                <ToolbarButton aria-label="Settings" appearance="subtle" icon={<Settings24Regular />}/>
                <ToolbarButton aria-label="Close panel" appearance="subtle" icon={<Dismiss24Regular />} onClick={() => setIsOpen(false)}/>
              </ToolbarGroup>
            </Toolbar>
          </DrawerHeaderNavigation>

          <DrawerHeaderTitle>Title goes here</DrawerHeaderTitle>
        </DrawerHeader>

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

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

export default WithNavigation;