#Adaptive Menu

import AdaptiveModeDemo from "@/shared/adaptiveModeDemo";
import CloudIcon from "@mui/icons-material/Cloud";
import ContentCopyIcon from "@mui/icons-material/ContentCopy";
import ContentCutIcon from "@mui/icons-material/ContentCut";
import ContentPasteIcon from "@mui/icons-material/ContentPaste";
import Divider from "@mui/material/Divider";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import MenuItem from "@mui/material/MenuItem";
import { AdaptiveButton } from "adaptive-material-ui/components/button";
import { AdaptiveMenu } from "adaptive-material-ui/components/menu";
import { useState } from "react";

export default function () {
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);

  return (
    <AdaptiveModeDemo>
      <AdaptiveButton
        onClick={(e) => setAnchorEl((v) => (v ? null : e.currentTarget))}
        variant="contained"
      >
        Open
      </AdaptiveButton>

      <AdaptiveMenu
        anchorEl={anchorEl}
        onClose={() => setAnchorEl(null)}
        open={anchorEl !== null}
      >
        <MenuItem onClick={() => setAnchorEl(null)}>
          <ListItemIcon>
            <ContentCutIcon fontSize="small" />
          </ListItemIcon>
          <ListItemText>Cut</ListItemText>
        </MenuItem>
        <MenuItem onClick={() => setAnchorEl(null)} selected>
          <ListItemIcon>
            <ContentCopyIcon fontSize="small" />
          </ListItemIcon>
          <ListItemText>Copy</ListItemText>
        </MenuItem>
        <MenuItem onClick={() => setAnchorEl(null)}>
          <ListItemIcon>
            <ContentPasteIcon fontSize="small" />
          </ListItemIcon>
          <ListItemText>Paste</ListItemText>
        </MenuItem>
        <Divider />
        <MenuItem onClick={() => setAnchorEl(null)}>
          <ListItemIcon>
            <CloudIcon fontSize="small" />
          </ListItemIcon>
          <ListItemText>Web Clipboard</ListItemText>
        </MenuItem>
      </AdaptiveMenu>
    </AdaptiveModeDemo>
  );
}