import InvoicePDF from '@/components/Invoice/Invoice';
import WebsiteLayout from '@/components/Layouts/WebsiteLayout';
import {
  useGetUserTransactionByIdQuery,
  useGetUserTransactionsQuery,
} from '@/lib/redux/services/Userflow/UserDashboard.api';
import { PDFDownloadLink } from '@react-pdf/renderer';
import moment from 'moment';
import { useSession } from 'next-auth/react';
import Link from 'next/link';
import { useRouter } from 'next/router';
import React, { useState } from 'react';
import { Card, Col, Container, Row, Spinner } from 'react-bootstrap';
import Image from 'react-bootstrap/Image';
import Modal from 'react-bootstrap/Modal';

export default function TaxReport() {
  const [modalShowGallery, setModalShowGallery] = React.useState(false);
  const [modalShow2, setModalShow2] = React.useState(false);
  const [transactionId, setTransactionId] = useState('');
  const { data: session, update }: any = useSession();
  const ID = session?.user?._id;
  const router = useRouter();
  const token = session?.user?.token;
  const skip = !token;
  const {
    data: history,
    isLoading,
    refetch,
    isFetching,
  } = useGetUserTransactionsQuery({
    start: '',
    end: '',
    token,
  });

  console.log(history, 'History');

  return (
    <>
      <WebsiteLayout>
        {isFetching ? (
          <div className="spinner-container">
            <Spinner animation="border" className="custom-spinner" />
          </div>
        ) : (
          <Container fluid>
            <div className="main-sect">
              <Row>
                {/* <Col lg="12">
                <div className="home-hed">
                  <h2 className="heading"> Tax Report </h2>
                </div>
              </Col> */}
              </Row>
              <Row className="mt-5">
                <div className="home-dashbaord">
                  {history?.data?.result?.map((data: any, index: any) => (
                    <Col
                      key={index}
                      lg="2"
                      onClick={() => {
                        setModalShow2(true), setTransactionId(data?._id);
                      }}
                    >
                      <Link href={''}>
                        <div className="report-box">
                          <div className="tax-box">
                            <Image src="/images/tax-docx-1.svg" className="thumbnail" alt="" />
                            <div className="home-title">
                              <h4>{data?.metadata?.description}</h4>
                            </div>
                          </div>
                        </div>
                      </Link>
                    </Col>
                  ))}
                </div>
              </Row>
            </div>
          </Container>
        )}
        <InvoiceModal
          show={modalShow2}
          onHide={() => setModalShow2(false)}
          transactionId={transactionId}
        />
      </WebsiteLayout>
    </>
  );
}

function InvoiceModal({ props, show, onHide, transactionId }: any) {
  const [modalShowTopup, setModalShowTopup] = React.useState(false);
  const router = useRouter();
  const { data: session }: any = useSession();
  const token = session?.user?.token;
  const {
    data: singleTrnsaction,
    isLoading,
    refetch,
  } = useGetUserTransactionByIdQuery({
    id: transactionId,
    token,
  });

  console.log(singleTrnsaction, 'single');
  return (
    <Modal
      {...props}
      show={show}
      onHide={onHide}
      size="lg"
      aria-labelledby="contained-modal-title-vcenter"
      centered
      className="affilaite-modal"
    >
      <Modal.Header></Modal.Header>

      <Modal.Body>
        <div className="report">
          <Row className="">
            <div className="home-dashbaord">
              <Col lg="12">
                <Card className="card-box-delivery">
                  <Card.Body>
                    <div className="deliver-ship">
                      <h4>Invoice</h4>
                      <div className="recipte">
                        <h5>Name</h5>
                        <h5>{singleTrnsaction?.data?.donor?.name}</h5>
                      </div>

                      <div className="recipte">
                        <h5>Email</h5>
                        <h5>{singleTrnsaction?.data?.donor?.email}</h5>
                      </div>

                      <div className="recipte">
                        <h5>Donation ID</h5>
                        <h5>{singleTrnsaction?.data?.donationId?.slice(0, 25)}</h5>
                      </div>

                      <div className="recipte">
                        <h5>Receipt No</h5>
                        <span>{singleTrnsaction?.data?.receipt?.slice(0, 15)}</span>
                      </div>

                      <div className="recipte">
                        <h5>Donation Received</h5>
                        <span> {moment(singleTrnsaction?.data?.donationReceived).format('L')}</span>
                      </div>
                      <div className="recipte">
                        <h5>Donation Amount </h5>
                        <span>${singleTrnsaction?.data?.donationAmount}</span>
                      </div>
                      <div className="recipte">
                        <h5>Processing Fees</h5>
                        <span>${singleTrnsaction?.data?.processingFees}</span>
                      </div>
                      <div className="recipte">
                        <h5>Tax Deductible Amount</h5>
                        <span>${singleTrnsaction?.data?.taxDeductibleAmount}</span>
                      </div>
                      <div className="recipte">
                        <h5>Subtotal (incl.VAT)</h5>
                        <span>${singleTrnsaction?.data?.subtotal}</span>
                      </div>
                    </div>
                  </Card.Body>
                </Card>
                {singleTrnsaction?.data && (
                  <PDFDownloadLink
                    document={<InvoicePDF transaction={singleTrnsaction.data} />}
                    fileName={`Invoice_${singleTrnsaction.data.donationId}.pdf`}
                    style={{
                      textDecoration: 'none',
                      padding: '20px 30px',
                      color: '#fff',
                      background: 'linear-gradient(92deg, #008a9c -7.97%, #08bfa4 103.59%)',
                      border: 'none',
                      borderRadius: '30px',
                      cursor: 'pointer',
                      display: 'inline-block',
                      marginTop: '10px',
                    }}
                  >
                    {({ loading }) => (loading ? 'Generating PDF...' : 'Download Invoice')}
                  </PDFDownloadLink>
                )}
              </Col>
            </div>
          </Row>
        </div>
      </Modal.Body>
    </Modal>
  );
}