import React from "react";
import { ModuleId, NavLeftHandSideItemParent } from "./types";
import ListItemInner from "./ListItemInner";
import { getActiveClasses } from "../utility/active-classes";
import Collapse from "@material-ui/core/Collapse";
import TriangleSvg from "./assets/triangle.svg";

export default function TopListItemInner({
  parentItem,
  selectedItem,
  onClickItem,
  children,
  isDragging,
  isDraggingAny,
  isDraggingOverUnpinned
}: {
  parentItem: NavLeftHandSideItemParent;
  selectedItem: ModuleId;
  onClickItem: (id: ModuleId) => void;
  children: React.ReactNode;
  isDragging: boolean;
  isDraggingAny: boolean;
  isDraggingOverUnpinned: boolean;
}) {
  const isChildSelected =
    parentItem.subItems &&
    parentItem.subItems.some(({ id }) => id === selectedItem);
  const isGroupSelected = selectedItem === parentItem.id || isChildSelected;
  const shouldShowSubItems = !!(isGroupSelected && parentItem.subItems);

  return (
    <div>
      <div className={"auik-flex auik-relative auik-cursor-pointer"}>
        {children}
        <ListItemInner
          onClick={() => onClickItem(parentItem.id)}
          id={parentItem.id}
          title={parentItem.title}
          isDraggingAny={isDraggingAny}
          className={getActiveClasses({
            "auik-bg-blue-900": !isGroupSelected && !isDragging,
            "auik-bg-blue-500 auik-shadow-md": isGroupSelected || isDragging,
            "auik-bg-red-500": isDraggingOverUnpinned
          })}
        />
        {isGroupSelected && (
          <TriangleSvg className="auik-absolute auik-right-0 auik-top-1/2 auik--translate-y-1/2" />
        )}
      </div>
      <Collapse in={shouldShowSubItems}>
        {shouldShowSubItems && (
          <ul>
            {parentItem.subItems.map(({ id, title }) => (
              <li key={id}>
                <ListItemInner
                  onClick={() => onClickItem(id)}
                  id={id}
                  title={title}
                  className={"auik-bg-blue-700"}
                  isDraggingAny={isDraggingAny}
                />
              </li>
            ))}
          </ul>
        )}
      </Collapse>
    </div>
  );
}