// 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 { Overflow } from "@coreai-ds/react-components";
import { mergeClasses } from "@coreai-ds/react-components";
import { OverflowItem } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";
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";

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 OverflowSelectionItem: React.FC<{
    onSelectItem?: (item: string) => void;
    selected?: boolean;
    id: string;
}> = props => {
    const onClick = () => {
        props.onSelectItem?.(props.id);
    };
    return (<OverflowItem id={props.id} pinned={props.selected}>
      <Button aria-pressed={props.selected ? 'true' : 'false'} appearance={props.selected ? 'primary' : 'secondary'} onClick={onClick}>
        Item {props.id}
      </Button>
    </OverflowItem>);
};

const OverflowMenuItem: React.FC<Pick<OverflowItemProps, 'id'> & {
    onClick: () => void;
}> = props => {
    const { id, onClick } = props;
    const isVisible = useIsOverflowItemVisible(id);
    if (isVisible) {
        return null;
    }
    return <MenuItem onClick={onClick}>Item {id}</MenuItem>;
};

const OverflowMenu: React.FC<{
    itemIds: string[];
    onSelect: (itemId: string) => void;
}> = ({ itemIds, onSelect }) => {
    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 => (<OverflowMenuItem onClick={() => onSelect(i)} key={i} id={i}/>))}
        </MenuList>
      </MenuPopover>
    </Menu>);
};

export const Pinned = (): JSXElement => {
    const styles = useStyles();
    const [selected, setSelected] = React.useState<Set<string>>(() => new Set(['6']));
    const onSelect = (itemId: string) => {
        setSelected(prev => {
            const next = new Set(prev);
            if (next.has(itemId)) {
                next.delete(itemId);
            }
            else {
                next.add(itemId);
            }
            return next;
        });
    };
    const itemIds = new Array(8).fill(0).map((_, i) => i.toString());
    return (<Overflow>
      <div className={mergeClasses(styles.container, styles.resizableArea)}>
        {itemIds.map(i => (<OverflowSelectionItem onSelectItem={onSelect} key={i} id={i} selected={selected.has(i)}/>))}
        <OverflowMenu itemIds={itemIds} onSelect={onSelect}/>
      </div>
    </Overflow>);
};

export default Pinned;