// 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 { Overflow } from "@coreai-ds/react-components";
import { mergeClasses } from "@coreai-ds/react-components";
import * as React from 'react';
import { useOverflowMenu } from "@coreai-ds/react-components";
import { Menu } from "@coreai-ds/react-components";
import { MenuTrigger } from "@coreai-ds/react-components";
import { MenuButton } from "@coreai-ds/react-components";
import { MenuPopover } from "@coreai-ds/react-components";
import { MenuList } from "@coreai-ds/react-components";
import type { OverflowItemProps } from "@coreai-ds/react-components";
import { useIsOverflowItemVisible } from "@coreai-ds/react-components";
import { MenuItem } from "@coreai-ds/react-components";
import { OverflowItem } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";

const useStyles = makeStyles({
    container: {
        display: 'flex',
        flexWrap: 'nowrap',
        minWidth: 0,
        overflow: 'hidden',
    },
    resizableArea: {
        minWidth: '200px',
        maxWidth: '800px',
        border: `2px solid ${tokens.colorBrandBackground}`,
        padding: '20px 10px 10px 10px',
        position: 'relative',
        resize: 'horizontal',
        '::after': {
            content: `'Resizable Area'`,
            position: 'absolute',
            padding: '1px 4px 1px',
            top: '-2px',
            left: '-2px',
            fontFamily: 'monospace',
            fontSize: '15px',
            fontWeight: 900,
            lineHeight: 1,
            letterSpacing: '1px',
            color: tokens.colorNeutralForegroundOnBrand,
            backgroundColor: tokens.colorBrandBackground,
        },
    },
});

const OverflowMenuItem: React.FC<Pick<OverflowItemProps, 'id'>> = props => {
    const { id } = props;
    const isVisible = useIsOverflowItemVisible(id);
    if (isVisible) {
        return null;
    }
    // As an union between button props and div props may be conflicting, casting is required
    return <MenuItem>Item {id}</MenuItem>;
};

const OverflowMenu: React.FC<{
    itemIds: string[];
}> = ({ itemIds }) => {
    const { ref, overflowCount, isOverflowing } = useOverflowMenu<HTMLButtonElement>();
    if (!isOverflowing) {
        return null;
    }
    return (<Menu>
      <MenuTrigger disableButtonEnhancement>
        <MenuButton ref={ref}>+{overflowCount} items</MenuButton>
      </MenuTrigger>

      <MenuPopover>
        <MenuList>
          {itemIds.map(i => {
            return <OverflowMenuItem key={i} id={i}/>;
        })}
        </MenuList>
      </MenuPopover>
    </Menu>);
};

export const ReverseDomOrder = (): JSXElement => {
    const styles = useStyles();
    const itemIds = new Array(8).fill(0).map((_, i) => i.toString());
    return (<Overflow overflowDirection="start">
      <div className={mergeClasses(styles.container, styles.resizableArea)}>
        <OverflowMenu itemIds={itemIds}/>
        {itemIds.map(i => (<OverflowItem key={i} id={i}>
            <Button>Item {i}</Button>
          </OverflowItem>))}
      </div>
    </Overflow>);
};

export default ReverseDomOrder;