import { getConfig, text } from "../lib/config";
import { format } from "../lib/format";
import { PlusIcon } from "./icons";

/**
 * Empty column while the list has room: "Add a product" jumps to the
 * "You may also compare" strip when it's shown, else opens the shop.
 */
export function AddSlot({ left }) {
  const onClick = (event) => {
    const mount = event.currentTarget.closest(".pcfw-table-mount");
    const strip = mount && mount.querySelector(".pcfw-related__title");

    if (strip) {
      event.preventDefault();
      strip.scrollIntoView({ behavior: "smooth", block: "center" });
      strip.focus({ preventScroll: true });
    }
  };

  return (
    <th scope="col" className="pcfw-table__product pcfw-table__slot">
      <a
        className="pcfw-table__add"
        href={getConfig().shop_url || "#"}
        onClick={onClick}
      >
        <span className="pcfw-table__add-icon">
          <PlusIcon />
        </span>
        {text("addProduct", "Add a product")}
        <span className="pcfw-table__add-left">
          {format(
            left === 1
              ? text("slotsOne", "%d slot left")
              : text("slotsMany", "%d slots left"),
            left,
          )}
        </span>
      </a>
    </th>
  );
}