// 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 { Toolbar } from "@coreai-ds/react-components";
import { ToolbarGroup } from "@coreai-ds/react-components";
import { createPresenceComponentVariant } from "@coreai-ds/react-components";
import { Scale } from "@fluentui/react-motion-components-preview";
import { motionTokens } from "@coreai-ds/react-components";
import { ToolbarButton } from "@coreai-ds/react-components";
import { ArrowLeft24Regular } from "@fluentui/react-icons";
import { Calendar24Regular } from "@fluentui/react-icons";
import { Settings24Regular } from "@fluentui/react-icons";
import { Dismiss24Regular } from "@fluentui/react-icons";
import { createPresenceComponent } from "@coreai-ds/react-components";
import { fadeAtom } from "@fluentui/react-motion-components-preview";
import { slideAtom } from "@fluentui/react-motion-components-preview";
import { DrawerBody } from "@coreai-ds/react-components";
import { DrawerHeaderTitle } from "@coreai-ds/react-components";
import { DrawerFooter } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";

const useStyles = makeStyles({
    toolbar: {
        justifyContent: 'space-between',
    },
    body: {
        flex: '1',
        width: '100%',
        maxWidth: '100%',
        position: 'relative',
    },
    level: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        ':first-child': {
            paddingTop: 0,
        },
        ':last-child': {
            paddingBottom: 0,
        },
    },
    footer: {
        justifyContent: 'space-between',
    },
});

const IconPresenceMotion = createPresenceComponentVariant(Scale, {
    duration: motionTokens.durationNormal,
    easing: motionTokens.curveEasyEase,
});

const BodyPresenceMotion = createPresenceComponent<{
    level: 1 | 2;
}>(({ level }) => {
    const duration = motionTokens.durationNormal;
    const easing = motionTokens.curveEasyEase;
    const outX = level === 1 ? '-100%' : '100%';
    return {
        enter: [
            fadeAtom({ direction: 'enter', duration, easing }),
            slideAtom({ direction: 'enter', duration, easing, outX }),
        ],
        exit: [fadeAtom({ direction: 'exit', duration, easing }), slideAtom({ direction: 'exit', duration, easing, outX })],
    };
});

export const MultipleLevels = (): JSXElement => {
    const styles = useStyles();
    const [isOpen, setIsOpen] = React.useState(false);
    const [level, setLevel] = React.useState<1 | 2>(1);
    // 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 {...restoreFocusSourceAttributes} position="start" open={isOpen} onOpenChange={(_, { open }) => setIsOpen(open)}>
        <DrawerHeader>
          <DrawerHeaderNavigation>
            <Toolbar className={styles.toolbar}>
              <ToolbarGroup>
                <IconPresenceMotion visible={level === 2} unmountOnExit>
                  <ToolbarButton aria-label="Back" appearance="subtle" icon={<ArrowLeft24Regular />} onClick={() => setLevel(1)}/>
                </IconPresenceMotion>
              </ToolbarGroup>

              <ToolbarGroup>
                <IconPresenceMotion visible={level === 1} unmountOnExit>
                  <ToolbarButton aria-label="Go to calendar" appearance="subtle" icon={<Calendar24Regular />} onClick={() => setLevel(2)}/>
                </IconPresenceMotion>
                <ToolbarButton aria-label="Settings" appearance="subtle" icon={<Settings24Regular />}/>
                <ToolbarButton aria-label="Close panel" appearance="subtle" icon={<Dismiss24Regular />} onClick={() => setIsOpen(false)}/>
              </ToolbarGroup>
            </Toolbar>
          </DrawerHeaderNavigation>
        </DrawerHeader>

        <div className={styles.body}>
          <BodyPresenceMotion level={1} visible={level === 1} unmountOnExit>
            <DrawerBody className={styles.level}>
              <DrawerHeaderTitle>Level 1 title</DrawerHeaderTitle>
              <p>Level 1 content</p>
            </DrawerBody>
          </BodyPresenceMotion>

          <BodyPresenceMotion level={2} visible={level === 2} unmountOnExit>
            <DrawerBody className={styles.level}>
              <DrawerHeaderTitle>Level 2 title</DrawerHeaderTitle>
              <p>Level 2 content</p>
            </DrawerBody>
          </BodyPresenceMotion>
        </div>

        <DrawerFooter className={styles.footer}>
          <Button appearance="subtle" disabled={level === 1} onClick={() => setLevel(1)}>
            Previous
          </Button>

          <Button appearance="primary" disabled={level === 2} onClick={() => setLevel(2)}>
            Next
          </Button>
        </DrawerFooter>
      </OverlayDrawer>

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

export default MultipleLevels;