// Copyright (C) The Arvados Authors. All rights reserved.
//
// SPDX-License-Identifier: AGPL-3.0

import * as React from 'react';
import { Button, Grid, StyleRulesCallback, WithStyles, Menu, MenuItem, IconButton } from '@material-ui/core';
import { PopoverOrigin } from '@material-ui/core/Popover';


interface DropdownMenuDataProps {
    id: string,
    icon: React.ComponentType,
}


type DropdownMenuProps = DropdownMenuDataProps;

class DropdownMenu extends React.Component<DropdownMenuProps> {

    state = {
        anchorEl: undefined
    }

    transformOrigin: PopoverOrigin = {
        vertical: "top",
        horizontal: "center"
    }

    render() {
        const { icon: Icon, id, children } = this.props;
        const { anchorEl } = this.state;
        return (
            <div>
                <IconButton
                    aria-owns={anchorEl ? id : undefined}
                    aria-haspopup="true"
                    color="inherit"
                    onClick={this.handleOpen}

                >
                    <Icon />
                </IconButton>
                <Menu
                    id={id}
                    anchorEl={anchorEl}
                    open={Boolean(anchorEl)}
                    onClose={this.handleClose}
                    onClick={this.handleClose}
                    anchorOrigin={this.transformOrigin}
                    transformOrigin={this.transformOrigin}
                >
                    {children}
                </Menu>
            </div>
        )
    }

    handleClose = () => {
        this.setState({ anchorEl: undefined })
    }

    handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
        this.setState({ anchorEl: event.currentTarget })
    }
}


export default DropdownMenu