import type { CSSProperties } from "react";
import { pcoStyleToCssVars } from "./pcoTheme";
import { OverviewCard } from "./OverviewCard";
import { OverviewTable } from "./OverviewTable";
import { PortraitSpiderChart } from "./PortraitSpiderChart";
import { StyledOverviewSection } from "./styledComponents";
import { interpolateTemplate } from "./parseContent";
import type { PCOStyle, PCOSection } from "./types";

type SectionRendererProps = {
  section: PCOSection;
  vars: Record<string, string>;
  defaultCardBg: string;
  defaultCardBorder: string;
  globalStyle?: PCOStyle;
};

export function SectionRenderer({
  section,
  vars,
  defaultCardBg,
  defaultCardBorder,
  globalStyle,
}: SectionRendererProps) {
  const title = interpolateTemplate(section.title, vars);
  const sectionStyle = section.style ?? {};
  const cardBg = sectionStyle.cardBackgroundColor ?? defaultCardBg;
  const cardBorder = sectionStyle.cardBorderColor ?? defaultCardBorder;
  const tableInherit: PCOStyle = {
    ...globalStyle,
    cardBackgroundColor: cardBg,
    cardBorderColor: cardBorder,
  };

  switch (section.type) {
    case "promise-snapshot":
      return (
        <StyledOverviewSection number={section.number} title={title} style={sectionStyle}>
          {section.body ? <p>{interpolateTemplate(section.body, vars)}</p> : null}
          <OverviewTable
            headers={section.tableHeaders ?? []}
            rows={section.tableRows ?? []}
            tableStyle={sectionStyle}
            inheritStyle={tableInherit}
          />
        </StyledOverviewSection>
      );

    case "text":
      return (
        <StyledOverviewSection number={section.number} title={title} style={sectionStyle}>
          {section.body ? <p>{interpolateTemplate(section.body, vars)}</p> : null}
        </StyledOverviewSection>
      );

    case "portrait-spider": {
      const labels = section.portraitLabels ?? [];
      const scores = section.portraitScores ?? [];
      const subtitle = interpolateTemplate(
        section.portraitSubtitle ?? "{course} connection to the Portrait of the Learner",
        vars
      );
      return (
        <StyledOverviewSection title={title} style={sectionStyle}>
          <OverviewCard
            cardColor={cardBg}
            cardBorderColor={cardBorder}
            cardTextColor={sectionStyle.cardTextColor}
            className="pco-spider-wrap"
          >
            <PortraitSpiderChart labels={labels} scores={scores} colors={sectionStyle} />
            <div>
              <h4>{subtitle}</h4>
              {section.portraitNote ? <p className="pco-pol-note">{section.portraitNote}</p> : null}
              <div className="pco-pillbox">
                {labels.map((label, i) => (
                  <span key={`${section.id}-pill-${i}`} className="pco-pill">
                    {label}: {scores[i] ?? 70}%
                  </span>
                ))}
              </div>
            </div>
          </OverviewCard>
        </StyledOverviewSection>
      );
    }

    case "table":
      return (
        <StyledOverviewSection number={section.number} title={title} style={sectionStyle}>
          {section.body ? <p>{interpolateTemplate(section.body, vars)}</p> : null}
          <OverviewTable
            headers={section.tableHeaders ?? []}
            rows={section.tableRows ?? []}
            tableStyle={sectionStyle}
            inheritStyle={tableInherit}
          />
        </StyledOverviewSection>
      );

    case "learner-list":
      return (
        <StyledOverviewSection number={section.number} title={title} style={sectionStyle}>
          <div className="pco-learner-list" style={pcoStyleToCssVars(sectionStyle) as CSSProperties}>
            {(section.learnerItems ?? []).map((item, i) => (
              <div
                key={`${section.id}-learner-${i}`}
                className="pco-learner-item"
                style={{
                  ...(item.backgroundColor ? { backgroundColor: item.backgroundColor } : {}),
                  ...(item.textColor ? { color: item.textColor } : {}),
                  ...(item.borderColor ? { borderColor: item.borderColor } : {}),
                }}
              >
                {item.icon ? <span className="pco-learner-icon">{item.icon}</span> : null}
                <b>{item.text}</b>
                {item.detail ? <span>{item.detail}</span> : null}
              </div>
            ))}
          </div>
        </StyledOverviewSection>
      );

    case "related":
      return (
        <StyledOverviewSection number={section.number} title={title} style={sectionStyle}>
          <p>
            {interpolateTemplate(section.body ?? "", vars)}
            {section.relatedSuffix ? ` ${section.relatedSuffix}` : ""}
          </p>
        </StyledOverviewSection>
      );

    case "home-support":
      return (
        <StyledOverviewSection number={section.number} title={title} style={sectionStyle}>
          {section.body ? <p>{interpolateTemplate(section.body, vars)}</p> : null}
          {section.bodySecondary ? <p>{section.bodySecondary}</p> : null}
        </StyledOverviewSection>
      );

    default:
      return null;
  }
}