// 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 { OverflowItem } from "@coreai-ds/react-components";
import type { ForwardRefComponent } from "@coreai-ds/react-components";
import * as React from 'react';
import { useIsOverflowItemVisible } 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 ItemVisibleCustomComponent: ForwardRefComponent<{
    appId: string;
}> = React.forwardRef((props, ref) => {
    const isVisible = useIsOverflowItemVisible(props.appId);
    console.log(`Item ${props.appId} is ${isVisible ? '' : 'not '}visible'`);
    return <Button ref={ref}>Item {props.appId}</Button>;
});

export const CustomComponent = (): JSXElement => {
    const styles = useStyles();
    const itemIds = new Array(8).fill(0).map((_, i) => i.toString());
    return (<Overflow>
      <div className={mergeClasses(styles.container, styles.resizableArea)}>
        {itemIds.map(i => (<OverflowItem key={i} id={i}>
            <ItemVisibleCustomComponent appId={i}/>
          </OverflowItem>))}
      </div>
    </Overflow>);
};

export default CustomComponent;