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

import type { JSXElement } from "@coreai-ds/react-components";
import { Menu } from "@coreai-ds/react-components";
import { createPresenceComponent } from "@coreai-ds/react-components";
import { fadeAtom } from "@fluentui/react-motion-components-preview";
import { blurAtom } from "@fluentui/react-motion-components-preview";
import { motionTokens } from "@coreai-ds/react-components";
import { MenuTrigger } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";
import { MenuPopover } from "@coreai-ds/react-components";
import { MenuList } from "@coreai-ds/react-components";
import { MenuItem } from "@coreai-ds/react-components";
import * as React from 'react';

const FadeInBlurOut = createPresenceComponent({
    enter: fadeAtom({ direction: 'enter', duration: 500 }),
    exit: [
        fadeAtom({ direction: 'exit', duration: 500 }),
        blurAtom({ direction: 'exit', duration: 500, easing: motionTokens.curveEasyEase }),
    ],
});

export const MotionCustom = (): JSXElement => (<Menu surfaceMotion={{
        children: (_, motionProps) => <FadeInBlurOut {...motionProps}/>,
    }}>
    <MenuTrigger disableButtonEnhancement>
      <Button>Toggle menu</Button>
    </MenuTrigger>

    <MenuPopover>
      <MenuList>
        <MenuItem>New</MenuItem>
        <MenuItem>New Window</MenuItem>
        <MenuItem disabled>Open File</MenuItem>
        <MenuItem>Open Folder</MenuItem>
      </MenuList>
    </MenuPopover>
  </Menu>);

export default MotionCustom;