"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 DataService from "@/Config/Axios";
import { toast } from "react-toastify";
import { InvoiceRowDataProp } from "@/Types/InvoiceType";
import { ClientRowDataProp } from "@/Types/TableType";
import { getDateDaysAhead, getFormattedDate } from "@/utils/Constants";
import { setLoading } from "@/Redux/Reducers/LayoutSlice";

const InvoiceView = () => {
  const router = useRouter();
  const params = useParams()
  const [invoiceDetails, setInvoiceDetails] = useState<InvoiceRowDataProp>()
  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)
      console.log(response);
      dispatch(setLoading(false))
    } catch (error: any) {
      dispatch(setLoading(false))
      toast.error(error.response.data.message)
    }
  }
  useEffect(() => {
    callApi()
  }, [params])

  return (
    <>
      <Row className="mb-3">
        <Col sm="12" className="d-flex justify-content-end">
          <Button onClick={() => router.push(`/${i18LangStatus}/invoices/edit/${params.id}`)} className="btn" color="primary">Edit</Button>
        </Col>
      </Row>
      <div className="container rounded shadow border 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">Invoice #:</h5>
          </Col>
          <Col sm="3">
            <p className="mb-0">{invoiceDetails?.clientInvoiceNumber}</p>
          </Col>
          <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">{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>
        </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">{getDateDaysAhead(invoiceDetails?.dueDate?.toString() ?? '0', invoiceDetails?.invoiceDate,)}</p>
          </Col>
        </Row>
        <Row className="mb-3">
          <Col sm="12">
            <h6 className="fw-bold mb-2">Notes:</h6>
            {
              invoiceDetails?.notes &&
              invoiceDetails?.notes.length > 0 &&
              invoiceDetails?.notes?.map(note =>
                <p className="fw-light">{note}</p>
              )}
          </Col>
        </Row>
      </div>
      <br />
      {/* <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 InvoiceView;