"use client";
import React, { useEffect } from "react";
import { Nav, NavItem, NavLink, TabContent, TabPane } from "reactstrap";
import { AllInvoices, ClosedInvoices, CurrentInvoices, Href, OpenInvoices, } from "@/Constant";
import { useAppSelector } from "@/Redux/Hooks";
import { Card, CardBody, Col, Container, Row } from "reactstrap";
import Link from "next/link";
import { useState } from "react";
import { useParams } from "next/navigation";
import DataService from "@/Config/Axios";
import { toast } from "react-toastify";
import { NewClientInitialValue } from "@/Data/Application/Clients";
import dynamic from "next/dynamic";

const ClientAllInvoicesDataTable = dynamic(() => import('./Invoices/cancelled/DataTable'), { ssr: false })
const ClientOpenInvoicesDataTable = dynamic(() => import('./Invoices/Open/DataTable'), { ssr: false })
const ClientClosedInvoicesDataTable = dynamic(() => import('./Invoices/Closed/DataTable'), { ssr: false })
const ClientCurrentInvoicesDataTable = dynamic(() => import('./Invoices/Current/DataTable'), { ssr: false })

const ClientView = () => {
  const { i18LangStatus } = useAppSelector((state) => state.langSlice);
  const [basicTab, setBasicTab] = useState("2");
  const [client, setClient] = useState(NewClientInitialValue)
  const params = useParams();
  const callApi = async () => {
    try {
      const response = await DataService.post(`/clients/${params.id}`)
      console.log(response);
      setClient(response.data.data)
    } catch (error: any) {
      toast.error(error?.response?.data?.message ?? "Error fetching details~")
    }
  }
  useEffect(() => {
    callApi()

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

  return (
    <>
      <Container fluid>
        <Row>
          <Col sm="12" className="d-flex justify-content-end mb-3">
            <Link
              className="btn btn-primary"
              href={`/${i18LangStatus}/clients/edit/${params.id}`}
            >
              Edit
            </Link>
          </Col>
        </Row>
        <Row>
          <Col sm="12">
            <Card className="hovercard text-center">
              <CardBody>
                <div className="info">
                  <Row className="g-3 align-items-center">
                    <Col sm="6" lg="4" className="order-sm-1 order-xl-0">
                      <Row className="g-3">
                        <Col md="6" >
                          <div className="ttl-info text-start">
                            <h6 className="mb-1">
                              <i className={`fa fa-envelope me-2`}></i>
                              Email
                            </h6>
                            <span className="text-truncate w-100 d-inline-block">
                              {client.email}
                            </span>
                          </div>
                        </Col>
                        <Col md="6" >
                          <div className="ttl-info text-start">
                            <h6 className="mb-1">
                              <i className={`fa fa-calendar me-2`}></i>
                              VAT ID
                            </h6>
                            <span className="text-truncate w-100 d-inline-block">
                              {client.taxId}
                            </span>
                          </div>
                        </Col>
                      </Row>
                    </Col>
                    <Col sm="12" lg="4" className="order-sm-0 order-xl-1">
                      <div className="user-designation">
                        <div className="title">
                          <Link
                            className=" fs-4"
                            target="_blank"
                            href={`/${i18LangStatus}/profile/user_profile`}
                          >
                            {client.firstName} {client.lastName}
                          </Link>
                        </div>
                        <div className="desc">{client.companyName}</div>
                      </div>
                    </Col>
                    <Col sm="6" lg="4" className="order-sm-2 order-xl-2">
                      <Row className="g-3">
                        <Col md="6">
                          <div className="ttl-info text-start">
                            <h6 className="mb-1">
                              <i className={`me-2 fa fa-phone`}></i>
                              Contact
                            </h6>
                            <span>
                              {client.phone}
                            </span>
                          </div>
                        </Col>
                        <Col md="6">
                          <div className="ttl-info text-start">
                            <h6 className="mb-1">
                              <i className={`me-2 fa fa-location-arrow`}></i>
                              Address
                            </h6>
                            <span>
                              {client.city} {client.country}
                            </span>
                          </div>
                        </Col>
                      </Row>
                    </Col>
                  </Row>
                </div>
              </CardBody>{" "}
            </Card>
          </Col>
        </Row>
        <Row>
          <Col sm="12">
            <Card>
              <CardBody>
                <h4>Basic Detail</h4>
                <hr className="mb-1" />
                <Row className="mb-3 mt-3">
                  <Col sm="4">
                    <h5 className="fw-bold mb-2">Title:</h5>
                    <p className="mb-0">{client.title}</p>
                  </Col>
                  <Col sm="4">
                    <h5 className="fw-bold mb-2">Name:</h5>
                    <p className="mb-0">{client.firstName} {client.lastName}</p>
                  </Col>
                </Row>
                <Row className="mb-3">
                  <Col sm="4">
                    <h5 className="fw-bold mb-2">Email Address:</h5>
                    <p className="mb-0">{client.email}</p>
                  </Col>
                  <Col sm="4">
                    <h5 className="fw-bold mb-2">Secondary Email Address:</h5>
                    <p className="mb-0">{client.secondaryEmail}</p>
                  </Col>
                  <Col sm="4">
                    <h5 className="fw-bold mb-2">Phone Number:</h5>
                    <p className="mb-0">{client.phone}</p>
                  </Col>
                </Row>
                <Row className="mb-3">
                  <Col sm="4">
                    <h5 className="fw-bold mb-2">Company Name:</h5>
                    <p className="mb-0">{client.companyName}</p>
                  </Col>
                  <Col sm="4">
                    <h5 className="fw-bold mb-2">Vat ID:</h5>
                    <p className="mb-0">{client.taxId}</p>
                  </Col>
                  <Col sm="4">
                    <h5 className="fw-bold mb-2">Language:</h5>
                    <p className="mb-0 text-capitalize">{client.language}</p>
                  </Col>
                </Row>
                <h4>Address</h4>
                <hr className="mb-1" />
                <Row className="mb-3 mt-3">
                  <Col sm="4">
                    <h5 className="fw-bold mb-2">Address:</h5>
                    <p className="mb-0">{client.address}</p>
                  </Col>
                  <Col sm="4">
                    <h5 className="fw-bold mb-2">City:</h5>
                    <p className="mb-0">{client.city}</p>
                  </Col>
                  <Col sm="4">
                    <h5 className="fw-bold mb-2">State:</h5>
                    <p className="mb-0">{client.state}</p>
                  </Col>
                  <Col sm="4">
                    <h5 className="fw-bold mb-2">Country:</h5>
                    <p className="mb-0">{client.country}</p>
                  </Col>
                  <Col sm="4">
                    <h5 className="fw-bold mb-2">Postal Code:</h5>
                    <p className="mb-0">{client.postalCode}</p>
                  </Col>
                </Row>
                {/* <Row>
                  <Col>
                    <div className="text-end">
                      <Link
                        href={`/${i18LangStatus}/clients`}
                        className="btn btn-primary me-3"
                      >
                        Back to Clients
                      </Link>
                    </div>
                  </Col>
                </Row> */}
              </CardBody>
            </Card>
          </Col>
        </Row>

        <Card>
          <CardBody>
            <Nav tabs className="">
              <NavItem>
                <NavLink
                  href={Href}
                  className={`txt-primary ${basicTab === "2" ? "active" : ""}`}
                  onClick={() => setBasicTab("2")}
                >
                  {OpenInvoices}
                </NavLink>
              </NavItem>
              <NavItem>
                <NavLink
                  href={Href}
                  className={`txt-primary ${basicTab === "1" ? "active" : ""}`}
                  onClick={() => setBasicTab("1")}
                >
                  {AllInvoices}
                </NavLink>
              </NavItem>
              <NavItem>
                <NavLink
                  href={Href}
                  className={`txt-primary ${basicTab === "4" ? "active" : ""}`}
                  onClick={() => setBasicTab("4")}
                >
                  {CurrentInvoices}
                </NavLink>
              </NavItem>
              <NavItem>
                <NavLink
                  href={Href}
                  className={`txt-primary ${basicTab === "3" ? "active" : ""}`}
                  onClick={() => setBasicTab("3")}
                >
                  {ClosedInvoices}
                </NavLink>
              </NavItem>
            </Nav>
            <TabContent activeTab={basicTab}>
              <TabPane tabId="1">
                <ClientAllInvoicesDataTable />
              </TabPane>
              <TabPane tabId="2">
                <ClientOpenInvoicesDataTable />
              </TabPane>
              <TabPane tabId="3">
                <ClientClosedInvoicesDataTable />
              </TabPane>
              <TabPane tabId="4">
                <ClientCurrentInvoicesDataTable />
              </TabPane>
            </TabContent>
          </CardBody>
        </Card>
      </Container>
    </>
  );
};

export default ClientView;