/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/. */

// eslint-disable-next-line no-unused-vars
import React from "react";
import { actionCreators as ac, actionTypes as at } from "common/Actions.mjs";

// Pager for the Now tab when 2+ live games are happening at once. Chevron
// buttons step through the live matches (already sorted followed-first); dot
// indicators show position and let the user jump directly to a match.
// Chevron icon direction is mirrored under RTL via CSS (`:dir(rtl)`).
function LivePagination({
  dispatch,
  liveIndex,
  liveCount,
  size,
  handleInteraction,
}) {
  const buttonSize = size === "medium" ? "small" : undefined;
  const goTo = nextIndex => {
    dispatch(
      ac.AlsoToMain({
        type: at.WIDGETS_SPORTS_CHANGE_LIVE_INDEX,
        data: nextIndex,
      })
    );
    handleInteraction();
  };
  const goPrev = () => goTo((liveIndex - 1 + liveCount) % liveCount);
  const goNext = () => goTo((liveIndex + 1) % liveCount);

  return (
    <div className="sports-live-pagination" role="group">
      <moz-button
        type="ghost"
        size={buttonSize}
        className="sports-live-pagination-prev"
        iconSrc="chrome://global/skin/icons/arrow-left.svg"
        data-l10n-id="newtab-sports-widget-pagination-previous"
        onClick={goPrev}
      ></moz-button>
      <div className="sports-live-pagination-dots">
        {Array.from({ length: liveCount }, (_, i) => (
          <button
            key={i}
            type="button"
            className={`sports-live-pagination-dot${i === liveIndex ? " is-active" : ""}`}
            aria-current={i === liveIndex ? "true" : undefined}
            data-l10n-id="newtab-sports-widget-pagination-dot"
            data-l10n-args={JSON.stringify({
              index: i + 1,
              total: liveCount,
            })}
            onClick={() => goTo(i)}
          />
        ))}
      </div>
      <moz-button
        type="ghost"
        size={buttonSize}
        className="sports-live-pagination-next"
        iconSrc="chrome://global/skin/icons/arrow-right.svg"
        data-l10n-id="newtab-sports-widget-pagination-next"
        onClick={goNext}
      ></moz-button>
    </div>
  );
}

export { LivePagination };