import { useShare } from "../hooks/useShare";
import { preloadShareMenu, useShareMenu } from "../hooks/useShareMenu";
import { getConfig, text } from "../lib/config";
import { printTable } from "../lib/share";
import { ShareIcon } from "./ShareIcon";

/**
 * Share (with the "Share via" menu, a lazy chunk) and Print, per the
 * Sharing settings,
 * plus a status line for "Link copied" or the link to copy by hand.
 */
export function ShareActions({ products }) {
  const { share = {}, compare_url: page } = getConfig();
  const s = useShare(products);
  const ShareMenu = useShareMenu(Boolean(s.menu));
  const canShare =
    share.enabled !== false && Boolean(page) && products.length > 0;
  const canPrint = share.print !== false;

  if (!canShare && !canPrint) {
    return null;
  }

  return (
    <div className="pcfw-share">
      {canShare && (
        <span className="pcfw-share__wrap">
          <button
            ref={s.buttonRef}
            type="button"
            className="pcfw-share__button"
            aria-expanded={s.menu ? "true" : "false"}
            aria-controls={s.menu ? s.menuId : undefined}
            onClick={s.onShare}
            onPointerEnter={preloadShareMenu}
            onFocus={preloadShareMenu}
          >
            <ShareIcon name="share" />
            {text("share", "Share")}
          </button>
          {s.menu && ShareMenu && (
            <ShareMenu
              id={s.menuId}
              {...s.menu}
              onClose={s.closeMenu}
              onCopy={s.onCopy}
              onNative={s.onNative}
            />
          )}
        </span>
      )}
      {canPrint && (
        <button
          type="button"
          className="pcfw-share__button"
          onClick={(e) => printTable(e.currentTarget)}
        >
          <ShareIcon name="print" />
          {text("print", "Print")}
        </button>
      )}
      <span className="pcfw-share__status" role="status">
        {s.status && s.status.message}
        {s.status && s.status.url && (
          <input
            className="pcfw-share__url"
            readOnly
            value={s.status.url}
            onFocus={(e) => e.currentTarget.select()}
          />
        )}
      </span>
    </div>
  );
}