import { Box, Heading, Center, Menu, Portal, Flex } from '@chakra-ui/react'
import AlertLevel from './AlertLevelWidget'
// import AddWidgetMenu from './AddWidgetMenu';

export default function FirstWidgetButton({ appendWidget }) {
    return (
        <Menu.Root positioning={{ placement: "bottom-middle" }} >
            <Menu.Trigger asChild>
                <Box
                    p={6}
                    m="auto"
                    mt={6}
                    align="center"
                    textAlign="center"
                    justify="center"
                    width="400px"
                    borderRadius="md" 
                    boxShadow="md"
                    border="2px dashed"
                    borderColor="gray.300"
                    bg="gray.50"
                    cursor="pointer"
                    _hover = {{
                        bg: "gray.100",
                        borderColor: "gray.400",
                        boxShadow: "lg",
                    }}
                >
                    Add First Widget
                </Box>
            </Menu.Trigger>
            <Portal>
                <Menu.Positioner>
                    <Menu.Content>
                        <Menu.Item 
                            value="AlertLevel" 
                            onClick={() => appendWidget(AlertLevel, 3, 6, 3, 6, 3, 6)}
                        >
                            Alert Level
                        </Menu.Item>
                        <Menu.Item value="co2">CO2</Menu.Item>
                        <Menu.Item value="ivans">IVANS</Menu.Item>
                        <Menu.Item value="plume heights">Plume Heights</Menu.Item>
                        <Menu.Item value="alert level changes">Alert Level Changes</Menu.Item>
                    </Menu.Content>
                </Menu.Positioner>
            </Portal>
        </Menu.Root>
    );
}