/* eslint-disable jsx-a11y/alt-text */
import React from "react";
import { Document, Page, View, Text, Image } from "@react-pdf/renderer";
import { ModuleScore } from "@/interfaces/module.scores";
import { styles } from "./styles";

import { StyleSheet } from "@react-pdf/renderer";
import TestReportFooter from "./test.report.footer";
const customStyles = StyleSheet.create({
  testDetails: {
    display: "flex",
    gap: 4,
  },
});

interface Props {
  date: string;
  name: string;
  email: string;
  id: string;
  gender?: string;
  testDetails: ModuleScore[];
  summary: string;
  logo: string;
  qrcode: string;
  renderDetails: React.ReactNode;
  title: string;
  summaryPNG: string;
  summaryScore: string;
}

const TestReport = ({
  title,
  date,
  name,
  email,
  id,
  gender,
  testDetails,
  summary,
  logo,
  qrcode,
  renderDetails,
  summaryPNG,
  summaryScore,
}: Props) => {
  const defaultTextStyle = [styles.textFont, { fontSize: 8 }];
  const defaultSkillsTextStyle = [styles.textFont, { fontSize: 8 }];
  const defaultSkillsTitleStyle = [
    styles.textFont,
    styles.textColor,
    styles.textBold,
    { fontSize: 7 },
  ];
  return (
    <Document>
      <Page style={styles.body}>
        <View style={styles.alignRightRow}>
          <Image src={logo} fixed style={styles.image64} />
        </View>
        <View style={styles.titleView}>
          <Text
            style={[
              styles.textFont,
              styles.textBold,
              styles.textColor,
              styles.textUnderline,
              styles.title,
              { fontSize: 14 },
            ]}
          >
            {title}
          </Text>
        </View>
        <View style={styles.textMargin}>
          <Text style={defaultTextStyle}>Date of Test: {date}</Text>
        </View>
        <Text style={[styles.textFont, styles.textBold, { fontSize: 11 }]}>
          Candidate Information:
        </Text>
        <View style={styles.textMargin}>
          <Text style={defaultTextStyle}>Name: {name}</Text>
          <Text style={defaultTextStyle}>ID: {id}</Text>
          <Text style={defaultTextStyle}>Email: {email}</Text>
          <Text style={defaultTextStyle}>Gender: {gender}</Text>
        </View>
        <View style={{ height: "120px" }}>
          <Text
            style={[
              styles.textFont,
              styles.textBold,
              styles.textColor,
              { fontSize: 12 },
            ]}
          >
            Test Details:
          </Text>
          <View>{renderDetails}</View>
        </View>
        <View>
          <Text
            style={[
              styles.textFont,
              styles.textBold,
              styles.textColor,
              { fontSize: 12 },
            ]}
          >
            Performance Summary
          </Text>
          <View style={{ display: "flex", flexDirection: "row", gap: 16 }}>
            <View style={{ flex: 1 }}>
              <Text style={[styles.textFont, { fontSize: 8 }]}>{summary}</Text>
            </View>
            <View style={[styles.textFont, styles.radialContainer]}>
              <Image src={summaryPNG} style={styles.image64}></Image>
              <View style={[styles.textColor, styles.radialResultContainer]}>
                <Text style={styles.textBold}>{summaryScore}</Text>
              </View>
            </View>
          </View>
        </View>
        <View style={[{ paddingTop: 30 }, styles.separator]}></View>
        <TestReportFooter />
      </Page>
      <Page style={styles.body}>
        <View>
          <Text
            style={[
              styles.textFont,
              styles.textBold,
              styles.textColor,
              styles.textUnderline,
              { fontSize: 12, paddingTop: 10 },
            ]}
          >
            Skills Feedback
          </Text>
          <View
            style={{
              paddingTop: 10,
              gap: 8,
            }}
          >
            {testDetails
              .filter(
                ({ suggestions, evaluation }) => suggestions || evaluation
              )
              .map(({ module, suggestions, evaluation }) => (
                <View key={module} style={customStyles.testDetails}>
                  <Text style={[...defaultSkillsTitleStyle, styles.textBold]}>
                    {module}
                  </Text>
                  <Text style={defaultSkillsTextStyle}>{evaluation}</Text>
                  <Text style={defaultSkillsTextStyle}>{suggestions}</Text>
                </View>
              ))}
          </View>
          <View style={styles.alignRightRow}>
            <Image src={qrcode} style={styles.qrcode} />
          </View>
        </View>
        <View style={[{ paddingBottom: 30 }, styles.separator]}></View>
        <View style={{ flexGrow: 1 }}></View>
        <TestReportFooter />
      </Page>
    </Document>
  );
};

export default TestReport;