import {makeStyles, MenuItem, MenuList, Text, tokens} from "@fluentui/react-components";
import {ArchiveRegular, DocumentBulletListRegular} from "@fluentui/react-icons";
import {VirtualizerScrollView} from "@fluentui/react-components/unstable";
import React from "react";

const useStyles = makeStyles({
    container: {
        marginTop: '0.5rem',
        maxWidth: 'calc(100vw - 25rem - 1px)',
    },
    row: {
        height: '32px',
        display: 'flex',
        marginLeft: '0.5rem',
        marginRight: '0.5rem',
    },
    item: {
        width: '100%',
        maxWidth: '100%',
        "&:hover": {
            color: tokens.colorNeutralForeground2BrandPressed,
        }
    },
    text: {
        overflow: 'hidden',
        width: 'calc(100vw - 32rem)',
        display: "block",
    }
})

export interface ListComponentProps {
    type: "bucket" | "file"
    list: string[],
}

export function ListComponent(props: ListComponentProps) {

    const styles = useStyles();

    async function handleClick(item: string) {
        console.log('[DEBUG] bucket click =', item);
    }

    function handleRightClick(e: React.MouseEvent<HTMLDivElement>, string: string) {
        e.preventDefault()
    }

    return <MenuList className={styles.container}>
        <VirtualizerScrollView
            numItems={props.list.length}
            itemSize={32}
            container={{role: 'list', style: {maxHeight: 'calc(100vh - 9rem)'}}}
        >
            {(idx) => {
                return <div
                    className={styles.row} key={idx}
                    onClick={async () => {
                        await handleClick(props.list[idx])
                    }}
                    onContextMenu={async (e) => {
                        handleRightClick(e, props.list[idx])
                    }}>
                    <MenuItem className={styles.item}
                              icon={props.type === 'bucket' ? <ArchiveRegular/> : <DocumentBulletListRegular/>}>
                        <Text truncate wrap={false} className={styles.text}>
                            {props.list[idx]}
                        </Text>
                    </MenuItem>
                </div>
            }}
        </VirtualizerScrollView>
    </MenuList>
}