import PropTypes from "prop-types";
import { UIMCButton } from "@ui-marcom/react/button";
import { UIMCIcon } from "@ui-marcom/react/icon";
import "./ValueDriverNav.scss";

// fixed display order for the driver quick-nav - content.valuePartnership.drivers'
// own array order isn't meaningful (ValueInfographic's Venn SVG positions
// segments via hardcoded data-driver-id coordinates, not array order), same
// as GlobeDetailCard's IMPACT_CATEGORIES pattern
const DRIVER_ORDER = [
  "strategic_transformation",
  "digital_innovation",
  "workforce",
  "facility",
  "technology",
  "operations",
];

/**
 * Compact vertical quick-nav for the 6 drivers, shown in
 * ValueExcellencePage's detail-view aside so the user can jump straight
 * between driver pages instead of returning to the Venn-diagram overview
 * each time.
 *
 * @param {Object} props
 * @param {Array<{id: string, title: string}>} props.drivers - content.valuePartnership.drivers
 * @param {string} props.selectedId - id of the currently active driver
 * @param {function(string): void} props.onSelect
 * @param {function(): void} props.onBack
 * @param {Object} props.labels
 */
export const ValueDriverNav = ({ drivers, selectedId, onSelect, onBack, labels }) => {
  const orderedDrivers = DRIVER_ORDER.map((id) => drivers.find((d) => d.id === id)).filter(Boolean);

  return (
    <div className="value-driver-nav">
      <ul className="value-driver-nav__list">
        {orderedDrivers.map((driver) => (
          <li
            key={driver.id}
            className={
              "value-driver-nav__item-wrapper" +
              (driver.id === selectedId ? " value-driver-nav__item-wrapper--active" : "")
            }>
            <button
              type="button"
              className={"value-driver-nav__item"}
              onClick={() => onSelect(driver.id)}>
              {driver.title}
            </button>
          </li>
        ))}
      </ul>

      <div className="value-driver-nav__actions">
        <UIMCButton
          className="value-driver-nav__back"
          variant="standard"
          size="medium"
          title={labels.backToOverview}
          onClick={onBack}>
          <UIMCIcon slot="prefix" name="arrow-left" />
          {labels.backToOverview || "Back to overview"}
        </UIMCButton>
      </div>
    </div>
  );
};

ValueDriverNav.propTypes = {
  drivers: PropTypes.arrayOf(
    PropTypes.shape({ id: PropTypes.string.isRequired, title: PropTypes.string.isRequired })
  ).isRequired,
  selectedId: PropTypes.string,
  onSelect: PropTypes.func.isRequired,
  onBack: PropTypes.func.isRequired,
  labels: PropTypes.object.isRequired,
};