/*
 * Copyright 2020-2021 AskChristee, LLC. All rights reserved.
 */

import { Document, Page, StyleSheet, Text, View, Image } from '@react-pdf/renderer';
import React from 'react';
import { TConsumerDebtNotes, TConsumerDebtResponse } from '../../../../types/api';
import ReportHeader from '../../../atoms/Pdf/ReportHeader';
import ReportTitle from '../../../atoms/Pdf/ReportTitle';
import UserInfo from '../../../atoms/Pdf/UserInfo';
import logo from '../../../../images/christee-logo.png';

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',
  },
  image: {
    width: 70,
    height: 20,
  },
  header: {
    fontSize: 12,
    marginBottom: 20,
    textAlign: 'center',
    color: 'grey',
  },
  subtitle: {
    width: '100%',
    textAlign: 'left',
    fontSize: 11,
    lineHeight: '150%',
  },
  description: {
    textAlign: 'left',
    width: '50%',
    fontSize: 9,
  },
  tableContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    marginTop: 0,
  },
  row: {
    flexDirection: 'row',
    height: 16,
  },
  acalc: {
    width: '30%',
    fontSize: 9,
    textAlign: 'left',
  },
  note: {
    width: '100%',
    textAlign: 'left',
    fontSize: 9,
  },
  logo: {
    width: 65,
    height: 15,
    position: 'absolute',
    bottom: 11,
    left: 65,
  },
  copy: {
    fontSize: 9,
    position: 'absolute',
    bottom: 13,
    left: 10,
  },
});

interface RProps {
  aNotes: TConsumerDebtNotes;
}

const ReportDetails: React.FC<RProps> = ({ aNotes }) => {
  return (
    <View style={styles.tableContainer}>
      <View style={styles.row}>
        <Text style={styles.note}>{aNotes.fumess}</Text>
      </View>
      <View style={styles.row}>
        <Text style={styles.note}>{aNotes.fumess1}</Text>
      </View>

      <View style={styles.row}>
        <Text style={styles.note}></Text>
      </View>

      <View style={styles.row}>
        <Text style={styles.subtitle}>{aNotes.header1}</Text>
      </View>
      <View style={styles.row}>
        <Text style={styles.note}>{aNotes.pdfmess1}</Text>
      </View>
      <View style={styles.row}>
        <Text style={styles.note}>{aNotes.pdfmess1a}</Text>
      </View>

      <View style={styles.row}>
        <Text style={styles.note}>{}</Text>
      </View>

      <View style={styles.row}>
        <Text style={styles.subtitle}>{aNotes.header2}</Text>
      </View>
      <View style={styles.row}>
        <Text style={styles.note}>{aNotes.pdfmess2}</Text>
      </View>
      <View style={styles.row}>
        <Text style={styles.note}>{aNotes.pdfmess3}</Text>
      </View>
      <View style={styles.row}>
        <Text style={styles.note}>{aNotes.pdfmess3a}</Text>
      </View>

      <View style={styles.row}>
        <Text style={styles.note}></Text>
      </View>

      <View style={styles.row}>
        <Text style={styles.subtitle}>{aNotes.header3}</Text>
      </View>
      <View style={styles.row}>
        <Text style={styles.note}>{aNotes.pdfmess4}</Text>
      </View>
      <View style={styles.row}>
        <Text style={styles.note}>{aNotes.pdfmess5}</Text>
      </View>

      <View style={styles.row}>
        <Text style={styles.note}></Text>
      </View>

      <View style={styles.row}>
        <Text style={styles.subtitle}>{aNotes.loan_mess}</Text>
      </View>
      <View style={styles.row}>
        <Text style={styles.note}>{aNotes.m_note}</Text>
      </View>
      <View style={styles.row}>
        <Text style={styles.note}>{aNotes.m_note1}</Text>
      </View>
      <View style={styles.row}>
        <Text style={styles.note}>{aNotes.m_note2}</Text>
      </View>
      <View style={styles.row}>
        <Text style={styles.note}>{aNotes.m_note3}</Text>
      </View>
      <View style={styles.row}>
        <Text style={styles.note}>{aNotes.m_note4}</Text>
      </View>
      <View style={styles.row}>
        <Text style={styles.note}>{aNotes.m_note5}</Text>
      </View>
      <View style={styles.row}>
        <Text style={styles.note}>{aNotes.m_note6}</Text>
      </View>
      <View style={styles.row}>
        <Text style={styles.note}>{aNotes.m_note7}</Text>
      </View>

      <View style={styles.row}>
        <Text style={styles.note}>{aNotes.pdfmess6}</Text>
      </View>
    </View>
  );
};

interface Props {
  dat: TConsumerDebtResponse & { title: string };
}
const PdfReportContainer: React.FC<Props> = ({ dat: { results, coverPage } }) => {
  return (
    <Document>
      <Page style={styles.body}>
        <Text style={styles.header} fixed>
          <ReportHeader company={coverPage.company} />
        </Text>
        <ReportTitle title={results.aNotes.brow_head} />
        {!!(coverPage.name && coverPage.email) && <UserInfo name={coverPage.name} email={coverPage.email} />}
        <ReportDetails {...results} />
        <Text style={styles.copy}>Powered By</Text>
        <Image style={styles.logo} src={logo} />
        <Text style={styles.pageNumber} render={({ pageNumber, totalPages }) => `${pageNumber} / ${totalPages}`} fixed />
      </Page>
    </Document>
  );
};

export default PdfReportContainer;