import { useState, useEffect } from "react";
import PropTypes from "prop-types";
import { useContent } from "../../../services/content";
import { useAnalytics } from "../../../services/analytics/analytics";
import { Headline } from "../../../components/elements/Headline/Headline";
import { ValueInfographic } from "./ValueInfographic";
import { ValueDriverNav } from "./ValueDriverNav";
import "./ValueExcellencePage.scss";

/**
 * Value & Excellence Drivers page, ported from value-excellence-page.js:
 * an overview (clickable Venn infographic) that switches to a driver detail
 * view. The old page also duplicated the detail solutions as a mobile-only
 * accordion (hidden above its "xl" breakpoint via CSS) - this kiosk always
 * runs at one large landscape resolution (see presentationModes.js), so only
 * the grid variant is ported; the DOM-measurement height hack for the grid
 * titles is replaced by CSS Grid's own row-stretching.
 */
export const ValueExcellencePage = ({ onSelectionChange }) => {
  const { content } = useContent();
  const { drivers = [], labels = {} } = content.valuePartnership || {};
  const { trackEvent } = useAnalytics();
  const [selectedDriver, setSelectedDriver] = useState(null);

  // tells the parent to unmount ValuePartnershipNav while ValueDriverNav
  // occupies its slot instead - reset on unmount too, in case the user
  // navigates away from the excellence section while a driver is still
  // selected (mirrors GlobePage's onSelectionChange)
  useEffect(() => {
    onSelectionChange?.(!!selectedDriver);
  }, [selectedDriver, onSelectionChange]);
  useEffect(() => () => onSelectionChange?.(false), [onSelectionChange]);

  const handleSelect = (id) => {
    const driver = drivers.find((d) => d.id === id);
    if (!driver) return;
    setSelectedDriver(driver);
    trackEvent?.("driver_select", { element: driver.title, payload: { driverId: id } });
  };

  const handleBack = () => {
    setSelectedDriver(null);
    trackEvent?.("driver_back_to_overview");
  };

  if (selectedDriver) {
    return (
      <div className="value-excellence-page value-excellence-page--detail">
        <div className="value-excellence-page__aside">
          <img className="value-excellence-page__driver-image" src={selectedDriver.image} alt="" />
          <ValueDriverNav
            drivers={drivers}
            selectedId={selectedDriver.id}
            onSelect={handleSelect}
            onBack={handleBack}
            labels={labels}
          />
        </div>

        <div className="value-excellence-page__content">
          <div className="value-excellence-page__driver-header">
            <Headline text={selectedDriver.title} level={1} color="orange" />
            <Headline text={selectedDriver.tagline} level={2} />
          </div>
          <p className="value-excellence-page__description">{selectedDriver.description}</p>

          <div className="value-excellence-page__solutions">
            {selectedDriver.solutions.map((solution) => (
              <div key={solution.title} className="value-excellence-page__solution">
                <p className="value-excellence-page__solution-title">{solution.title}</p>
                <p className="value-excellence-page__solution-text">{solution.text}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="value-excellence-page">
      <div className="value-excellence-page__header-container">
        <h1 className="value-excellence-page__header">{labels.valueExcellenceHeader}</h1>
      </div>
      <div className="value-excellence-page__infographic">
        <ValueInfographic onSelect={handleSelect} />
      </div>
    </div>
  );
};

ValueExcellencePage.propTypes = {
  // called with true while a driver is selected, false once cleared - lets
  // the parent unmount ValuePartnershipNav so ValueDriverNav can take its slot
  onSelectionChange: PropTypes.func,
};

// also default-exported (alongside the named export above, which the rest
// of the codebase's page components use) so ValuePartnership.jsx can
// React.lazy() it - see the comment there
export default ValueExcellencePage;