/* 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";
import ListItem from "./list.item";

const customStyles = StyleSheet.create({
  testDetails: {
    display: "flex",
    gap: 4,
  },
  testDetailsContainer: {
    display: "flex",
    gap: 16,
  },
});

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;
  passportId: string;
}

const TestReport = ({
  title,
  date,
  name,
  email,
  id,
  gender,
  testDetails,
  summary,
  logo,
  qrcode,
  renderDetails,
  summaryPNG,
  summaryScore,
  passportId,
}: 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}>Email: {email}</Text>
          <Text style={defaultTextStyle}>Gender: {gender}</Text>
          <Text style={defaultTextStyle}>Passport ID: {passportId}</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 userId={id} />
      </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,
                  bullet_points = [],
                }) => (
                  <View key={module} style={customStyles.testDetailsContainer}>
                    <View style={customStyles.testDetails}>
                      <Text
                        style={[...defaultSkillsTitleStyle, styles.textBold]}
                      >
                        {module}
                      </Text>
                      <Text style={defaultSkillsTextStyle}>{evaluation}</Text>
                      <Text style={defaultSkillsTextStyle}>{suggestions}</Text>
                    </View>
                    <View style={customStyles.testDetails}>
                      {bullet_points.length > 0 && (
                        <>
                          <Text
                            style={defaultSkillsTitleStyle}
                          >
                            How to Improve:
                          </Text>
                          <View>
                            {bullet_points.map((text: string) => (
                              <ListItem
                                key={text}
                                text={text}
                                textStyle={defaultSkillsTextStyle}
                              />
                            ))}
                          </View>
                        </>
                      )}
                    </View>
                  </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 userId={id} />
      </Page>
    </Document>
  );
};

export default TestReport;
