import Box from "@mui/material/Box";
import Divider from "@mui/material/Divider";
import { alpha } from "@mui/material/styles";

import type { WgIssuesLanguage } from "@/features/pswg/working-group-issues/wg-issues-i18n";

import type { CdcIssueMatrixDetailMock } from "../cdc-issue-matrix-detail-mock";
import type { CdcIssueMatrixTranslation } from "../cdc-issue-matrix-i18n";

import { CdcIssueMatrixDetailSection } from "./cdc-issue-matrix-detail-section";
import { CdcIssueMatrixSubmitDetail } from "./cdc-issue-matrix-submit-detail";

type CdcIssueMatrixDetailBodyProps = {
  data: CdcIssueMatrixDetailMock;
  isDark: boolean;
  labels: CdcIssueMatrixTranslation["detail"];
  wgLanguage: WgIssuesLanguage;
};

export function CdcIssueMatrixDetailBody({
  data,
  isDark,
  labels,
  wgLanguage,
}: CdcIssueMatrixDetailBodyProps) {
  const sections = labels.sections;

  return (
    <>
      <CdcIssueMatrixSubmitDetail
        data={data}
        isDark={isDark}
        labels={labels.submitDetailLabels}
        wgLanguage={wgLanguage}
      />

      <Divider
        sx={{
          mt: 3,
          mb: 3,
          borderColor: isDark ? alpha("#ffffff", 0.12) : "#e4e4e4",
        }}
      />

      <Box sx={{ display: "flex", flexDirection: "column", gap: 3 }}>
        <CdcIssueMatrixDetailSection
          isDark={isDark}
          title={sections.issueDescription}
        >
          {data.issueDescription}
        </CdcIssueMatrixDetailSection>

        <CdcIssueMatrixDetailSection
          isDark={isDark}
          title={sections.recommendation}
        >
          {data.recommendation}
        </CdcIssueMatrixDetailSection>

        <CdcIssueMatrixDetailSection isDark={isDark} title={sections.rgcDecision}>
          {data.rgcDecision}
        </CdcIssueMatrixDetailSection>

        <CdcIssueMatrixDetailSection
          isDark={isDark}
          isEmpty={!data.indicators.trim()}
          title={sections.indicators}
        >
          {data.indicators}
        </CdcIssueMatrixDetailSection>

        <CdcIssueMatrixDetailSection
          isDark={isDark}
          isEmpty={!data.progressSolution.trim()}
          title={sections.progressSolution}
        >
          {data.progressSolution}
        </CdcIssueMatrixDetailSection>

        <CdcIssueMatrixDetailSection
          isDark={isDark}
          isEmpty={!data.implementationChallenges.trim()}
          title={sections.implementationChallenges}
        >
          {data.implementationChallenges}
        </CdcIssueMatrixDetailSection>

        <CdcIssueMatrixDetailSection
          isDark={isDark}
          isEmpty={!data.request.trim()}
          title={sections.request}
        >
          {data.request}
        </CdcIssueMatrixDetailSection>

        <CdcIssueMatrixDetailSection
          isDark={isDark}
          isEmpty={!data.nextStep.trim()}
          title={sections.nextStep}
        >
          {data.nextStep}
        </CdcIssueMatrixDetailSection>

        <CdcIssueMatrixDetailSection
          isDark={isDark}
          isEmpty={!data.sourceOfVerification.trim()}
          title={sections.sourceOfVerification}
        >
          {data.sourceOfVerification}
        </CdcIssueMatrixDetailSection>

        <CdcIssueMatrixDetailSection
          isDark={isDark}
          isEmpty={!data.linkToVerificationSource.trim()}
          title={sections.linkToVerificationSource}
        >
          {data.linkToVerificationSource}
        </CdcIssueMatrixDetailSection>
      </Box>
    </>
  );
}