"use client";
import { useEffect, useState } from "react";
import { useParams, useRouter } from "next/navigation";
import { useAppDispatch, useAppSelector } from "@/Redux/Hooks";
import { Button, Col, Row, } from "reactstrap";
import Link from "next/link";
import DataService from "@/Config/Axios";
import { toast } from "react-toastify";
import { InvoiceRowDataProp } from "@/Types/InvoiceType";
import { ClientRowDataProp } from "@/Types/TableType";
import { getFormattedDate } from "@/utils/Constants";
import { setLoading } from "@/Redux/Reducers/LayoutSlice";
import { currencyOptions } from "@/utils/currencies";
import Image from "next/image";

const InvoiceViewModal = ({ invoiceDetails, toggle }: { invoiceDetails: InvoiceRowDataProp, toggle: any }) => {
  const router = useRouter();
  const params = useParams()
  const [client, setClient] = useState<ClientRowDataProp>()
  const { i18LangStatus } = useAppSelector((state) => state.langSlice);
  // const dispatch = useAppDispatch()
  // const callApi = async () => {
  //   dispatch(setLoading(true))
  //   try {
  //     const response = await DataService.post(`/invoices/details/${params.id}`)
  //     setInvoiceDetails(response.data.data)
  //     const clientApiResponse = await DataService.post(`/clients/${response.data.data.clientId}`)
  //     setClient(clientApiResponse.data.data)
  //     console.log(response);
  //     dispatch(setLoading(false))
  //   } catch (error: any) {
  //     dispatch(setLoading(false))
  //     toast.error(error.response.data.message)
  //   }
  // }
  // useEffect(() => {
  //   callApi()

  //   return () => {
  //   }
  // }, [])

  return (
    <>

      <div className="container p-5">
        <Row className="mb-3 align-items-center">
          <Col sm="6">
            <h2 className="fs-1">INVOICE</h2>
            <h6 className="text-gray"> #{invoiceDetails?.invoiceNumber}</h6>
          </Col>
        </Row>
        <br />
        <br />
        <br />
        <Row className="mb-3">
          <Col sm="3">
            <h5 className="fw-bold mb-2">Billed to:</h5>
          </Col>
          <Col sm="3">
            <p className="mb-0">{invoiceDetails?.clientId?.firstName} {invoiceDetails?.clientId?.lastName}</p>
          </Col>
          <Col sm="3">
            <h5 className="fw-bold mb-2">Currency:</h5>
          </Col>
          <Col sm="3">
            <p className="mb-0 text-uppercase">
              {invoiceDetails?.currency}
            </p>
          </Col>
          <Col sm="3">
            <h5 className="fw-bold mb-2">Reference:</h5>
          </Col>
          <Col sm="3">
            <p className="mb-0">{invoiceDetails?.reference}</p>
          </Col>
          <Col sm="3">
            <h5 className="fw-bold mb-2">Invoice #:</h5>
          </Col>
          <Col sm="3">
            <p className="mb-0">{invoiceDetails?.invoiceNumber}</p>
          </Col>
        </Row>
        <br />
        <br />
        <br />
        <Row className="mb-3">
          <table cellPadding="5">
            <tr>
              <td className="border"><h5 className="fw-bold ">Amount Open:</h5></td>
              <td className="border text-center"> <p className="mb-0">{invoiceDetails?.pending}</p></td>
            </tr>
            <tr>
              <td className="border "><h5 className="fw-bold ">Total Amount:</h5></td>
              <td className="border text-center"> <p className="mb-0">{invoiceDetails?.total}</p></td>
            </tr>
          </table>
          {/* <Col sm="6">
                      <h5 className="fw-bold mb-2">Amount Open:</h5>
                    </Col>
                    <Col sm="6">
                      <p className="mb-0">{invoiceDetails?.pending}</p>
                    </Col>
                    <Col sm="6">
                      <h5 className="fw-bold mb-2">Total Amount:</h5>
                    </Col>
                    <Col sm="6">
                      <p className="mb-0">{invoiceDetails?.total}</p>
                    </Col> */}
        </Row>
        <br />
        <br />
        <Row className="mb-3">
          <Col sm="6">
            <h5 className="fw-bold mb-2">Invoice Date:</h5>
            <p className="mb-0">
              {invoiceDetails?.invoiceDate && getFormattedDate(invoiceDetails?.invoiceDate)}
            </p>
          </Col>
          <Col sm="6">
            <h6 className="fw-bold mb-2">Due Date:</h6>
            <p className=" fw-light">{invoiceDetails?.dueDate?.toString()} days</p>
          </Col>
        </Row>
      </div>
      <br />
      <Row className="mb-3">
        <Col sm="12" className="d-flex justify-content-end">
          <Button onClick={toggle} className="btn btn-outline-primary me-2" color="transparent" >close</Button>
          <Link href={`/${i18LangStatus}/invoices/${invoiceDetails._id}`}><Button className="btn" color="primary">View Details</Button></Link>
        </Col>
      </Row>
      {/* <Row>
        <Col>
          <div className="text-end">
            <Link
              href={`/${i18LangStatus}/invoices`}
              className="btn btn-primary me-3"
            >
              Back to Invoice
            </Link>
          </div>
        </Col>
      </Row> */}
    </>
  );
};

export default InvoiceViewModal;