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

import { Document, Image, Page, StyleSheet, Text } from '@react-pdf/renderer';
import React from 'react';
import logo from '../../../../images/christee-logo.png';
import { PdfReportTitle } from '../../../atoms';
import ReportHeader from '../../../atoms/Pdf/ReportHeader';
import PdfDetailHeader from './PdfDetailHeader';
import PdfRow from './PdfRow';
import PdfRowHeader from './PdfRowHeader';
import PdfSummaryHeader from './PdfSummaryHeader';

const styles = StyleSheet.create({
  body: {
    paddingTop: 10,
    paddingBottom: 25,
    paddingHorizontal: 30,
    backgroundColor: '#fff',
  },
  pageNumber: {
    position: 'absolute',
    fontSize: 9,
    bottom: 15,
    left: 0,
    right: 0,
    textAlign: 'center',
    color: 'black',
  },
  image: {
    width: 100,
    height: 20,
  },
  header: {
    fontSize: 12,
    marginBottom: 20,
    textAlign: 'center',
    color: 'grey',
  },
  acalc: {
    width: '12%',
    fontSize: 9,
    textAlign: 'left',
  },
  row: {
    flexDirection: 'row',
    height: 16,
  },
  section: {
    margin: 10,
    padding: 10,
    flexGrow: 1,
  },
  logo: {
    width: 65,
    height: 15,
    position: 'absolute',
    bottom: 11,
    left: 65,
  },
  copy: {
    fontSize: 9,
    position: 'absolute',
    bottom: 13,
    left: 10,
  },
});

function PdfReportContainer({ dat }: any) {
  console.log('pdfreportcontainer', dat);
  return (
    <Page size="LETTER" style={styles.body}>
      <Text style={styles.header} fixed>
        <ReportHeader company={dat.coverPage.company} />
      </Text>
      <PdfReportTitle title={dat.fumess} />
      <PdfSummaryHeader />
      <PdfRowHeader {...dat} />
      <PdfReportTitle title="Amortization Details on A Year To Year Basis" />
      <PdfDetailHeader />
      <PdfRow {...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>
  );
}

// since there are two sections, title is not used
export default function AmortizationPdf({ dat }: any) {
  return (
    <Document>
      <PdfReportContainer dat={dat} />
    </Document>
  );
}