import { Box, Menu, Portal } from '@chakra-ui/react'
import WidgetMenu from './WidgetMenu';
import AlertLevel from "@/components/Canvas/CanvasComponents/AlertLevelWidget.jsx";

export default function FirstWidgetButton({ appendWidget }) {
  const triggerItem = (
    <>
      <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 Your First Widget
        </Box>
      </Menu.Trigger>
    </>
  );
  const positioning = { placement: "bottom-middle" };
  // const WidgetMenuProps = { appendWidget, triggerItem, positioning };
  return (
    // <WidgetMenu {...WidgetMenuProps} />
    <Menu.Root positioning={positioning}>
      {triggerItem}
      <Portal>
        <Menu.Positioner>
          <Menu.Content>
            <Menu.Item
              value="AlertLevel"
              onClick={() => appendWidget(AlertLevel, 4, 7, 4, 7, 8, 14)}  // width and height are passed through here for each widget
            >
              Alert Level
            </Menu.Item>
            <Menu.Item value="CO2">CO2</Menu.Item>
            <Menu.Item value="Ivans">IVANS</Menu.Item>
            <Menu.Item value="PlumeHeights">Plume Heights</Menu.Item>
            <Menu.Item value="AlertLevelChanges">Alert Level Changes</Menu.Item>
          </Menu.Content>
        </Menu.Positioner>
      </Portal>
    </Menu.Root>
  );
}