// 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 { InlineDrawer } from "@coreai-ds/react-components";
import { createPresenceComponent } from "@coreai-ds/react-components";
import { motionTokens } 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 drawerWidth = '320px';

const useStyles = makeStyles({
    root: {
        border: '2px solid #ccc',
        overflow: 'hidden',
        position: 'relative',
        display: 'flex',
        height: '480px',
        backgroundColor: tokens.colorNeutralBackground1,
    },
    drawer: {
        width: drawerWidth,
        border: '1px solid',
    },
    content: {
        flex: '1',
        padding: '16px',
        display: 'grid',
        justifyContent: 'flex-start',
        alignItems: 'flex-start',
        gap: tokens.spacingVerticalM,
        gridAutoRows: 'max-content',
        boxSizing: 'border-box',
        position: 'absolute',
        inset: 0,
        backgroundColor: tokens.colorNeutralBackground1,
        border: `1px solid ${tokens.colorNeutralBackground1}`,
    },
});

const drawerMargin = tokens.spacingVerticalM;

/*
 * Create a custom DrawerMotion component that animates the drawer surface.
 */
const DrawerMotion = createPresenceComponent(() => {
    const keyframes = [
        {
            opacity: 0,
            transform: 'translate3D(-100%, 0, 0)',
            margin: 0,
            backgroundColor: tokens.colorNeutralBackground1,
            borderColor: tokens.colorNeutralBackground1,
            borderRadius: 0,
        },
        {
            opacity: 1,
            transform: 'translate3D(0, 0, 0)',
            margin: drawerMargin,
            backgroundColor: tokens.colorNeutralBackground3,
            borderColor: tokens.colorNeutralBackground4,
            borderRadius: tokens.borderRadiusXLarge,
        },
    ];
    return {
        enter: {
            keyframes,
            duration: motionTokens.durationNormal,
            easing: motionTokens.curveDecelerateMin,
        },
        exit: {
            keyframes: [...keyframes].reverse(),
            duration: motionTokens.durationSlow,
            easing: motionTokens.curveAccelerateMin,
        },
    };
});

/*
 * Create a custom ContentMotion component that animates the content element.
 */
const ContentMotion = createPresenceComponent(() => {
    const keyframes = [
        {
            transform: 'translate3D(0, 0, 0)',
            width: '100%',
            margin: 0,
            backgroundColor: tokens.colorNeutralBackground1,
            borderColor: tokens.colorNeutralBackground1,
            borderRadius: 0,
        },
        {
            transform: `translate3D(calc(${drawerWidth} + ${drawerMargin} * 2), 0, 0)`,
            width: `calc(100% - ${drawerWidth} - ${drawerMargin} * 3)`,
            margin: `${drawerMargin} 0`,
            backgroundColor: tokens.colorNeutralBackground3,
            borderColor: tokens.colorNeutralBackground4,
            borderRadius: tokens.borderRadiusXLarge,
        },
    ];
    return {
        enter: {
            keyframes,
            duration: motionTokens.durationGentle,
            easing: motionTokens.curveDecelerateMin,
        },
        exit: {
            keyframes: [...keyframes].reverse(),
            duration: motionTokens.durationGentle,
            easing: motionTokens.curveAccelerateMin,
        },
    };
});

export const MotionCustom = (): JSXElement => {
    const styles = useStyles();
    const [isOpen, setIsOpen] = React.useState(false);
    return (<div className={styles.root}>
      <InlineDrawer className={styles.drawer} 
    // Override motion settings for the drawer surface
    surfaceMotion={{ children: (_, props) => <DrawerMotion {...props}/> }} separator open={isOpen}>
        <DrawerHeader>
          <DrawerHeaderTitle action={<Button appearance="subtle" aria-label="Close" icon={<Dismiss24Regular />} onClick={() => setIsOpen(false)}/>}>
            Default Drawer
          </DrawerHeaderTitle>
        </DrawerHeader>

        <DrawerBody>
          <p>Drawer content</p>
        </DrawerBody>
      </InlineDrawer>

      <ContentMotion visible={isOpen}>
        <div className={styles.content}>
          <Button appearance="primary" onClick={() => setIsOpen(!isOpen)}>
            Toggle Drawer
          </Button>

          <p>Drawer content</p>
        </div>
      </ContentMotion>
    </div>);
};

export default MotionCustom;