// 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 { tokens } from "@coreai-ds/react-components";
import * as React from 'react';
import type { DrawerProps } 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({
    content: {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'flex-start',
        columnGap: tokens.spacingHorizontalXS,
    },
});

const capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);

export const Position = (): JSXElement => {
    const styles = useStyles();
    const [isOpen, setIsOpen] = React.useState(false);
    const [position, setPosition] = React.useState<Required<DrawerProps>['position']>('start');
    const onClickStartButton = React.useCallback(() => {
        setPosition('start');
        setIsOpen(true);
    }, []);
    const onClickEndButton = React.useCallback(() => {
        setPosition('end');
        setIsOpen(true);
    }, []);
    const onClickBottomButton = React.useCallback(() => {
        setPosition('bottom');
        setIsOpen(true);
    }, []);
    // 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={position} {...restoreFocusSourceAttributes} open={isOpen} onOpenChange={(_, { open }) => setIsOpen(open)}>
        <DrawerHeader>
          <DrawerHeaderTitle action={<Button appearance="subtle" aria-label="Close" icon={<Dismiss24Regular />} onClick={() => setIsOpen(false)}/>}>
            {capitalize(position)} Drawer
          </DrawerHeaderTitle>
        </DrawerHeader>

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

      <div className={styles.content}>
        <Button {...restoreFocusTargetAttributes} appearance="primary" onClick={onClickStartButton}>
          Open start
        </Button>

        <Button {...restoreFocusTargetAttributes} appearance="primary" onClick={onClickEndButton}>
          Open end
        </Button>

        <Button {...restoreFocusTargetAttributes} appearance="primary" onClick={onClickBottomButton}>
          Open Bottom
        </Button>
      </div>
    </div>);
};

export default Position;