import { Document, Image, Page, StyleSheet, Text } from '@react-pdf/renderer';
import React, { Fragment } from 'react';
import logo from '../../../../images/christee-logo.png';
import { AgentOfficerDocId, PdfReportSubtitle, PdfReportTitle, ReportHeader } from '../../../atoms';
import PdfClosingAcalc from '../ClosingAcalc';
import PdfClosingBcalc from '../ClosingBcalc';
import PdfMessageAcalc from './PdfMessageAcalc';
import PdfMessageBcalc from './PdfMessageBcalc';
import PdfReportCashAcalc from './PdfReportCashAcalc';
import PdfReportCashBcalc from './PdfReportCashBcalc';

/**
 * TODO: PDF fails when import atoms/styles
 *
 * import { StylesFromAtoms } from "../atoms/Styles";
 * const styles = StylesFromAtoms;
 */
const styles = StyleSheet.create({
  body: {
    paddingTop: 10,
    paddingBottom: 25,
    paddingHorizontal: 30,
  },
  pageNumber: {
    position: 'absolute',
    fontSize: 9,
    bottom: 15,
    left: 0,
    right: 0,
    textAlign: 'center',
    color: 'black',
  },
  header: {
    fontSize: 12,
    marginBottom: 20,
    textAlign: 'center',
    color: 'grey',
  },
  logo: {
    width: 65,
    height: 15,
    position: 'absolute',
    bottom: 11,
    left: 65,
  },
  copy: {
    fontSize: 9,
    position: 'absolute',
    bottom: 13,
    left: 10,
  },
});

const ContainerFinal = ({ dat, title, program }: any) => {
  return (
    <Fragment>
      {dat.bCalc && (
        <Fragment>
          <Page style={styles.body}>
            <Text style={styles.header} fixed>
              <ReportHeader company={dat.coverPage.company} />
            </Text>
            <PdfReportTitle title={title} />
            <PdfReportCashBcalc dat={dat} />
            <PdfMessageBcalc dat={dat} />
            <AgentOfficerDocId dat={dat} />
            <Text style={styles.copy}>Powered By</Text>
            <Image style={styles.logo} src={logo} />
            <Text style={styles.pageNumber} render={({ pageNumber, totalPages }) => `${pageNumber} / ${totalPages}`} fixed />
          </Page>
          <Page style={styles.body}>
            <Text style={styles.header} fixed>
              <ReportHeader company={dat.coverPage.company} />
            </Text>
            <PdfReportSubtitle program={program} cash="Minimum Cash" />
            <PdfClosingAcalc dat={dat} />
            <Text style={styles.copy}>Powered By</Text>
            <Image style={styles.logo} src={logo} />
            <Text style={styles.pageNumber} render={({ pageNumber, totalPages }) => `${pageNumber} / ${totalPages}`} fixed />
          </Page>
          <Page style={styles.body}>
            <Text style={styles.header} fixed>
              <ReportHeader company={dat.coverPage.company} />
            </Text>
            <PdfReportSubtitle program={program} cash="With Cash" />
            <PdfClosingBcalc dat={dat} />
            <Text style={styles.copy}>Powered By</Text>
            <Image style={styles.logo} src={logo} />
            <Text style={styles.pageNumber} render={({ pageNumber, totalPages }) => `${pageNumber} / ${totalPages}`} fixed />
          </Page>
        </Fragment>
      )}
      {!dat.bCalc && (
        <Fragment>
          <Page style={styles.body}>
            <Text style={styles.header} fixed>
              <ReportHeader company={dat.coverPage.company} />
            </Text>
            <PdfReportTitle title={title} />
            <PdfReportCashAcalc dat={dat} />
            <PdfMessageAcalc dat={dat} />
            <AgentOfficerDocId dat={dat} />
            <Text style={styles.copy}>Powered By</Text>
            <Image style={styles.logo} src={logo} />
            <Text style={styles.pageNumber} render={({ pageNumber, totalPages }) => `${pageNumber} / ${totalPages}`} fixed />
          </Page>
          <Page style={styles.body}>
            <Text style={styles.header} fixed>
              <ReportHeader company={dat.coverPage.company} />
            </Text>
            <PdfReportSubtitle program={program} cash="Minimal Cash" />
            <PdfClosingAcalc dat={dat} />
            <Text style={styles.copy}>Powered By</Text>
            <Image style={styles.logo} src={logo} />
            <Text style={styles.pageNumber} render={({ pageNumber, totalPages }) => `${pageNumber} / ${totalPages}`} fixed />
          </Page>
        </Fragment>
      )}
    </Fragment>
  );
};

const BuyersChoice = ({ dat }: any) => {
  return (
    <Document>
      {dat.conventional.aCalc && <ContainerFinal dat={dat.conventional} coverPage={dat.conventional.coverPage} title={dat.conventional.coverPage.title} program="Conventional" />}
      {dat.fha.aCalc && <ContainerFinal dat={dat.fha} coverPage={dat.conventional.coverPage} title={dat.fha.coverPage.title} program="FHA" />}
      {dat.va.aCalc && <ContainerFinal dat={dat.va} coverPage={dat.conventional.coverPage} title={dat.va.coverPage.title} program="VA" />}
      {dat.usda.aCalc && <ContainerFinal dat={dat.usda} coverPage={dat.conventional.coverPage} title={dat.usda.coverPage.title} program="USDA" />}
    </Document>
  );
};

export default BuyersChoice;