import {
  Avatar,
  ButtonBase,
  Divider,
  ListItemAvatar,
  ListItemIcon,
  ListItemText,
  MenuItem,
} from "@suid/material";
import {
  Show,
  createUniqueId,
  type ParentComponent,
} from "solid-js";
import {
  Settings as SettingsIcon,
  Bookmark as BookmarkIcon,
  Star as LikeIcon,
  FeaturedPlayList as ListIcon,
} from "@suid/icons-material";
import A from "../platform/A";
import Menu, { createManagedMenuState } from "../material/Menu";

const ProfileMenuButton: ParentComponent<{
  profile?: {
    account: {
      site: string;
      inf?: {
        displayName: string;
        avatar: string;
        username: string;
        id: string;
      };
    };
  };
}> = (props) => {
  const menuId = createUniqueId();
  const buttonId = createUniqueId();

  const [open, state] = createManagedMenuState();

  const onClick = (
    event: MouseEvent & { currentTarget: HTMLButtonElement },
  ) => {
    open(event.currentTarget.getBoundingClientRect());
  };

  const inf = () => props.profile?.account.inf;

  return (
    <>
      <ButtonBase
        aria-haspopup="true"
        sx={{ borderRadius: "50%" }}
        id={buttonId}
        onClick={onClick}
        aria-controls={open() ? menuId : undefined}
        aria-expanded={open() ? "true" : undefined}
      >
        <Avatar
          alt={`${inf()?.displayName}'s avatar`}
          src={inf()?.avatar}
        ></Avatar>
      </ButtonBase>
      <Menu
        id={menuId}
        MenuListProps={{
          "aria-labelledby": menuId,
          style: {
            "min-width": "220px",
          },
        }}
        {...state}
      >
        <MenuItem
          component={A}
          href={`/${encodeURIComponent(`${inf()?.username}@${props.profile?.account.site}`)}/profile/${inf()?.id}`}
          disabled={!props.profile}
        >
          <ListItemAvatar>
            <Avatar src={inf()?.avatar}></Avatar>
          </ListItemAvatar>
          <ListItemText
            primary={inf()?.displayName}
            secondary={`@${inf()?.username}`}
          ></ListItemText>
        </MenuItem>

        <MenuItem disabled>
          <ListItemIcon>
            <BookmarkIcon />
          </ListItemIcon>
          <ListItemText>Bookmarks</ListItemText>
        </MenuItem>
        <MenuItem disabled>
          <ListItemIcon>
            <LikeIcon />
          </ListItemIcon>
          <ListItemText>Likes</ListItemText>
        </MenuItem>
        <MenuItem disabled>
          <ListItemIcon>
            <ListIcon />
          </ListItemIcon>
          <ListItemText>Lists</ListItemText>
        </MenuItem>
        <Divider />
        <Show when={props.children}>
          {props.children}
          <Divider />
        </Show>
        <MenuItem component={A} href="/settings">
          <ListItemIcon>
            <SettingsIcon />
          </ListItemIcon>
          <ListItemText>Settings</ListItemText>
        </MenuItem>
      </Menu>
    </>
  );
};

export default ProfileMenuButton;