import PropTypes from "prop-types";

import { NavLinkContainer, NavLinkInline, NavLinkDrawer } from "../Links";
import AnimationGroup from "../AnimationGroup/AnimationGroup";
import { PracticeDetails, IndividualDetails } from "../Details";
import SanitizedContent from "../../SanitizedContent";
import * as SvgComponents from "../../../lib/SvgComponents.jsx";
import CmsSwitchLink from "../Links/CmsSwitchLink";

const DynamicContent = ({
  contentItems,
  className,
  recursionId,
  config,
  isExpandedState,
  expand,
}) => {
  const { openDrawersByDefault, linkActiveFunc, linkCallback } = config;
  let linkClass = isExpandedState ? "link-inline" : "link-collapsed";
  const containerRecursionId = recursionId ? recursionId : 0;

  const getDynamicIcon = (icon) => {
    const Component = SvgComponents[icon];
    return Component ? <Component /> : null;
  };

  const hasDarkerBackground = (darkerBackground) => {
    return darkerBackground ? "hr-smaller-vertical-spacing" : "";
  };

  const itemsMarkup = (contentItems || []).map((item, index) => {
    const key = `${JSON.stringify(item)}-${index}-${containerRecursionId}`;

    return (
      {
        divider: (
          <AnimationGroup
            display={isExpandedState}
            key={key}
            darkerBackground={item.darkerBackground}
          >
            <hr className={`${hasDarkerBackground(item.darkerBackground)}`} />
          </AnimationGroup>
        ),
        container: (
          <DynamicContent
            contentItems={item.items}
            className={item.className}
            recursionId={containerRecursionId + 1}
            config={config}
            isExpandedState={isExpandedState}
          />
        ),
        linkBack: (
          <AnimationGroup display={isExpandedState} key={key}>
            <NavLinkInline
              className="link-back"
              icon={getDynamicIcon("ChevronLeft")}
              url={item.url}
              label={item.label}
              linkCallback={linkCallback}
              showLabel={true}
            />
          </AnimationGroup>
        ),
        linkHome: (
          <AnimationGroup display={isExpandedState} key={key}>
            <NavLinkInline
              className="account-home-link"
              icon={getDynamicIcon(item?.icon)}
              url={item.url}
              label={item.label}
              linkCallback={linkCallback}
              showLabel={true}
            />
          </AnimationGroup>
        ),
        practiceDetails: (
          <AnimationGroup
            display={isExpandedState}
            className={"details"}
            key={key}
          >
            <PracticeDetails
              practiceName={item.practiceName}
              {...(!item.practiceTin ? {} : { practiceTin: item.practiceTin })}
              {...(!item.apmEntityId ? {} : { apmEntityId: item.apmEntityId })}
              {...(!item.vgId ? {} : { vgId: item.vgId })}
              {...(!item.cpcPlusId ? {} : { cpcPlusId: item.cpcPlusId })}
              {...(!item.pcfId ? {} : { pcfId: item.pcfId })}
              {...(!item.subgroupId ? {} : { subgroupId: item.subgroupId })}
            />
          </AnimationGroup>
        ),
        individualDetails: (
          <AnimationGroup display={isExpandedState} key={key}>
            <IndividualDetails
              individualName={item.individualName}
              individualNpi={item.individualNpi}
            />
          </AnimationGroup>
        ),
        linkDrawer: (
          <NavLinkDrawer
            key={key}
            isExpanded={isExpandedState}
            isAlwaysOpen={item.isAlwaysOpen}
            openByDefault={openDrawersByDefault}
            rightIcon="chevron-down"
            leftIcon={getDynamicIcon(item?.icon)}
            className={linkClass}
            label={item.label}
            linkActiveFunc={linkActiveFunc}
            linkCallback={linkCallback}
            listOfLinks={item.items}
            url={item.url}
            sidebarExpand={expand}
            isHighlighted={item.isHighlighted}
            darkerBackground={item.darkerBackground}
            leftBorderHighlightDisabled={item.leftBorderHighlightDisabled}
            hideLabelSection={item.hideLabelSection}
            largerDrawerBottomPadding={item.largerDrawerBottomPadding}
          />
        ),
        custom: (
          <AnimationGroup display={isExpandedState} key={key}>
            <SanitizedContent
              html={item.content}
              customClassName={item.customClassName}
            />
          </AnimationGroup>
        ),
        switchLink: (
          <AnimationGroup display={isExpandedState} key={key}>
            <CmsSwitchLink
              linkCallback={linkCallback}
              label={item.label}
              url={item.url}
            />
          </AnimationGroup>
        ),
      }[item.type] || (
        <NavLinkInline
          key={key}
          icon={getDynamicIcon(item?.icon)}
          className={item.className ? item.className : linkClass}
          url={item.url}
          label={item.label}
          linkCallback={linkCallback}
          showLabel={isExpandedState}
          disabled={item.disabled}
          target={item.target}
        />
      )
    );
  });

  if (className === "link-container") {
    return (
      <div className="animation-flat" key={`nav-link-container-${recursionId}`}>
        <NavLinkContainer
          listOfLinks={itemsMarkup}
          linkActiveFunc={linkActiveFunc}
        />
      </div>
    );
  } else {
    return <div className={className}>{itemsMarkup}</div>;
  }
};

export default DynamicContent;

DynamicContent.propTypes = {
  config: PropTypes.object,
  isExpandedState: PropTypes.bool,
  contentItems: PropTypes.array,
  className: PropTypes.string,
  recursionId: PropTypes.number,
  expand: PropTypes.func,
};