import React from "react";
import Menu from "../Menu";
import SvgIcon from "../Svg/Icon";
import { ModuleId, ModuleLookup } from "./types";
import SvgButton from "../SvgButton";
import MenuItem from "../MenuItem";

interface Props {
  moduleLookup: ModuleLookup;
  unpinnedIds: ModuleId[];
  onMenuItemClick: (moduleId: ModuleId) => void;
}

export default function UnpinnedMenu({
  moduleLookup,
  unpinnedIds,
  onMenuItemClick
}: Props) {
  return (
    <div>
      <Menu
        buttonElement={props => (
          <SvgButton
            {...props}
            color="white"
            aria-label="Unpinned Modules"
            aria-controls="nav-unpinned-menu"
            aria-haspopup="true"
            svgIconProps={{
              className: "auik-text-blue-900",
              size: 20,
              name: "three-dots"
            }}
          ></SvgButton>
        )}
        anchorOrigin={{
          vertical: "center",
          horizontal: "right"
        }}
        transformOrigin={{
          vertical: "center",
          horizontal: "left"
        }}
        className="auik-ml-3 auik-w-48"
      >
        {unpinnedIds.map(id => (
          <MenuItem
            key={id}
            onClick={() => {
              onMenuItemClick(id);
            }}
          >
            <SvgIcon
              className="auik-text-white auik-mr-3 auik-text-blue-500"
              size={16}
              alias={id}
            />
            <span>{moduleLookup[id].title}</span>
          </MenuItem>
        ))}
      </Menu>
    </div>
  );
}