import { getConfig, text } from "../lib/config";
import { ClearAllButton } from "../components/ClearAllButton";
import { OnlyDiffSwitch } from "../components/OnlyDiffSwitch";
import { ShareActions } from "../components/ShareActions";
import { summary } from "../lib/summary";

/**
 * Popup header: title, "3 of 4 · 7 differences", the "Only differences"
 * switch (when `onlyDiff` isn't null), Clear all, Open full page and Close. In the
 * overlay (`compact`) the title and description sit in the table corner
 * instead, so the header is a slim tools row.
 */
export function PopupHeader({
  data,
  closeRef,
  onClose,
  onlyDiff,
  onToggleOnlyDiff,
  compact = false,
}) {
  const { compare_url: compareUrl, limit } = getConfig();

  return (
    <header className="pcfw-popup__header">
      <div className="pcfw-popup__heading">
        {!compact && (
          <h2 id="pcfw-popup-title" className="pcfw-popup__title">
            {text("popupTitle", "Compare products")}
          </h2>
        )}
        {!compact && getConfig().table.description && (
          <p className="pcfw-popup__description">
            {getConfig().table.description}
          </p>
        )}
        {data && (
          <p className="pcfw-popup__sub">{summary(data, Number(limit) || 4)}</p>
        )}
      </div>
      <div className="pcfw-popup__actions">
        {data && <ShareActions products={data.products} />}
        {onlyDiff !== null && (
          <OnlyDiffSwitch checked={onlyDiff} onToggle={onToggleOnlyDiff} />
        )}
        {data && data.products.length > 0 && <ClearAllButton />}
        {compareUrl && (
          <a className="pcfw-popup__full" href={compareUrl}>
            {text("openFullPage", "Open full page")}
            <svg
              aria-hidden="true"
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path d="M7 17 17 7" />
              <path d="M8 7h9v9" />
            </svg>
          </a>
        )}
        <button
          ref={closeRef}
          type="button"
          className="pcfw-popup__close"
          aria-label={text("closeComparison", "Close comparison")}
          onClick={onClose}
        >
          <svg
            aria-hidden="true"
            width="18"
            height="18"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
          >
            <path d="M6 6l12 12" />
            <path d="M18 6 6 18" />
          </svg>
        </button>
      </div>
    </header>
  );
}