import { Stack } from "@phosphor-icons/react";
import type { SelectionSummary } from "../selectionSummary";
import { BottomControlDivider } from "./Divider";
import { bottomControlButtonClass } from "./styles";

export type SelectionControlsProps = {
  selection: SelectionSummary;
  onOpenLayers: () => void;
};

export function SelectionControls({ selection, onOpenLayers }: SelectionControlsProps) {
  const label = selectionLabel(selection);

  return (
    <>
      <button type="button" className={bottomControlButtonClass()} aria-label="Open layers" title="Open layers" onClick={onOpenLayers}>
        <Stack size={16} weight="regular" />
      </button>
      <BottomControlDivider />
      <span className="max-w-48 truncate px-1 text-white">{label}</span>
    </>
  );
}

function selectionLabel(selection: SelectionSummary) {
  switch (selection.type) {
    case "artboard":
      return `${selection.name} · ${selection.layerCount} layers`;
    case "layer":
      return selection.name;
    case "multi-layer":
      return `${selection.count} layers selected`;
    case "none":
      return "";
  }
}