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

import type { JSXElement } from "@coreai-ds/react-components";
import * as React from 'react';
import { makeStyles } from "@coreai-ds/react-components";
import { Menu } from "@coreai-ds/react-components";
import { MenuTrigger } from "@coreai-ds/react-components";
import type { MenuButtonProps } from "@coreai-ds/react-components";
import { SplitButton } from "@coreai-ds/react-components";
import { CalendarMonthRegular } from "@fluentui/react-icons";
import { MenuPopover } from "@coreai-ds/react-components";
import { MenuList } from "@coreai-ds/react-components";
import { MenuItem } from "@coreai-ds/react-components";
import { FilterRegular } from "@fluentui/react-icons";
import { Tooltip } from "@coreai-ds/react-components";

const useStyles = makeStyles({
    wrapper: {
        columnGap: '15px',
        display: 'flex',
        minWidth: 'min-content',
    },
});

export const Icon = (): JSXElement => {
    const [primaryActionButtonRef, setPrimaryActionButtonRef] = React.useState<HTMLButtonElement | HTMLAnchorElement | null>(null);
    const styles = useStyles();
    return (<div className={styles.wrapper}>
      <Menu positioning="below-end">
        <MenuTrigger disableButtonEnhancement>
          {(triggerProps: MenuButtonProps) => (<SplitButton menuButton={triggerProps} icon={<CalendarMonthRegular />}>
              With calendar icon before contents
            </SplitButton>)}
        </MenuTrigger>
        <MenuPopover>
          <MenuList>
            <MenuItem>Item a</MenuItem>
            <MenuItem>Item b</MenuItem>
          </MenuList>
        </MenuPopover>
      </Menu>

      <Menu positioning="below-end">
        <MenuTrigger disableButtonEnhancement>
          {(triggerProps: MenuButtonProps) => (<SplitButton menuButton={triggerProps} icon={<CalendarMonthRegular />} iconPosition="after">
              With calendar icon after contents
            </SplitButton>)}
        </MenuTrigger>
        <MenuPopover>
          <MenuList>
            <MenuItem>Item a</MenuItem>
            <MenuItem>Item b</MenuItem>
          </MenuList>
        </MenuPopover>
      </Menu>

      <Menu positioning="below-end">
        <MenuTrigger disableButtonEnhancement>
          {(triggerProps: MenuButtonProps) => (<SplitButton menuButton={triggerProps} icon={<CalendarMonthRegular />} menuIcon={<FilterRegular />}>
              With calendar icon and custom filter menu icon
            </SplitButton>)}
        </MenuTrigger>
        <MenuPopover>
          <MenuList>
            <MenuItem>Item a</MenuItem>
            <MenuItem>Item b</MenuItem>
          </MenuList>
        </MenuPopover>
      </Menu>

      <Menu positioning="below-end">
        <MenuTrigger disableButtonEnhancement>
          {(triggerProps: MenuButtonProps) => (<Tooltip content="With calendar icon only" positioning={{ target: primaryActionButtonRef }} relationship="inaccessible">
              <SplitButton menuButton={triggerProps} primaryActionButton={{ ref: setPrimaryActionButtonRef, 'aria-label': 'With calendar icon only' }} icon={<CalendarMonthRegular />}/>
            </Tooltip>)}
        </MenuTrigger>
        <MenuPopover>
          <MenuList>
            <MenuItem>Item a</MenuItem>
            <MenuItem>Item b</MenuItem>
          </MenuList>
        </MenuPopover>
      </Menu>
    </div>);
};

export default Icon;