import React from "react";
import { useContent } from "../../services/content";
import { useConfig } from "../../services/config/config";
import { SlidePage } from "../../components/SlidePage/SlidePage";
import { Headline } from "../../components/elements/Headline/Headline";
import "./RadEnablement.scss";

/**
 * Page header shown on every RadEnablement slide (title/subline from
 * content.header); the story icon on the right follows whichever story the
 * current view belongs to.
 *
 * @param {Object} props
 * @param {string} props.viewId - Currently shown view id.
 */
const RadHeader = ({ viewId }) => {
  const { content, views, stories } = useContent();
  if (!content.header) return null;

  const storyId = views.get(viewId)?.story;
  const storyHeaderIcon = storyId ? stories[storyId]?.header?.icon : null;

  return (
    <div className="rad-header">
      <Headline text={content.header.title} level={1} color="orange" />
      <div className="rad-header-content">
        <Headline text={content.header.subline} level={3} />
        {storyHeaderIcon && (
          <div className="rad-header-icon">
            <img src={storyHeaderIcon} alt="" />
          </div>
        )}
      </div>
      {/* <div></div> */}
    </div>
  );
};

/**
 * "RadEnablement Services" presentation app - the shared {@link SlidePage}
 * plus a persistent {@link RadHeader} (content: public/data/rad-content.json).
 */
export const RadEnablementPage = () => {
  const { disableAnimations } = useConfig();

  return (
    <SlidePage
      basePath="/rad-enablement"
      startViewId="rad-intro-0"
      storyHubViewId="rad-select-story"
      homeViewId="rad-intro-0"
      classPrefix="rad"
      renderHeader={(viewId) => <RadHeader viewId={viewId} />}
      disableAnimations={disableAnimations}
    />
  );
};