import HomeIcon from "@mui/icons-material/Home";
import { Button } from "@mui/material";
import React from "react";
import type { UsersMap } from "../../api/matrix/MatrixApiProfile";
import type { Room } from "../../api/matrix/MatrixApiRoom";
import type { SpaceHierarchy } from "../../api/matrix/MatrixApiSpace";
import { RoomIcon } from "./RoomIcon";

export function SpaceSelector(p: {
  rooms: Room[];
  hierarchy: SpaceHierarchy;
  users: UsersMap;
  selectedSpace?: string;
  onChange: (space?: string) => void;
}): React.ReactElement {
  const spaces = React.useMemo(
    () => p.rooms.filter((r) => r.is_space && p.hierarchy.has(r.id)),
    [p.rooms]
  );

  // Do not display space bar if your is not member of any space
  if (spaces.length === 0) return <></>;

  return (
    <div style={{ display: "flex", flexDirection: "column" }}>
      <SpaceButton
        icon={<HomeIcon />}
        onClick={() => p.onChange()}
        selected={p.selectedSpace === undefined}
      />

      {spaces.map((s) => (
        <SpaceButton
          key={s.id}
          icon={<RoomIcon room={s} {...p} />}
          onClick={() => p.onChange(s.id)}
          selected={p.selectedSpace === s.id}
        />
      ))}
    </div>
  );
}

function SpaceButton(p: {
  selected?: boolean;
  icon: React.ReactElement;
  onClick: () => void;
}): React.ReactElement {
  return (
    <Button
      variant={p.selected ? "contained" : "text"}
      style={{ margin: "2px 5px", padding: "25px 10px", fontSize: "200%" }}
      onClick={p.onClick}
    >
      {p.icon}
    </Button>
  );
}