import React, { useEffect, useState } from "react";
import AdminDashboard from "../AdminDashboard/AdminDashboard";
import { Message } from "../../../components/message";
import { useNavigate } from "react-router-dom";
import { Modal, Table } from "react-bootstrap";
import { HomeIcon } from "../../../components/Application/ApplicationIcon";
import dataicon from "../../../../src/assets/images/data-icon.png";
import { OverlayTrigger, Tooltip } from "react-bootstrap";
import { DeleteIcon, EditIcon, EyeIcon } from "../AdminIcon";
import {
    disabledApplicationListCsv,
    disabledApplicationListExcel,
    disabledApplicationListPdf,
  getDeletedApplicationList,
} from "../../../services/api/admin";
import ReactPaginate from "react-paginate";
import { formatDateWithSlash, printData } from "../../../Utils/common";
import { stateDistrict } from "../../../services/api/auth";
import NotFoundTable from "../../../components/notFound/NotFoundTable";
import { recoverApplicationData } from '../../../services/api/admin';
import { CgSync } from "react-icons/cg";
import { PdfBaseUrl } from "../../../Utils/Utils";
import { Spinner } from "react-bootstrap";

const DisableApplications = ({ application_type, pageFrom, editApplicationPermission, deleteApplicationPermission }) => {
    const navigate = useNavigate();
    const [applicationList, setApplicationList] = useState([]);
    const [apiMessage, setApiMessage] = useState({ type: "", message: "" });
    const [currentPage, setCurrentPage] = useState(1);
    const [recoverData, setRecoverData] = useState();
    const [totalPages, setTotalPages] = useState(0); // Total number of pages
    const [searchTerm, setSearchTerm] = useState();
    const [orderBy, setOrderBy] = useState("asc");
    const [districtList, setDistrictList] = useState([]);
    const [sortBy, setSortBy] = useState("created_at");
    const [searchData, setSearchData] = useState("");
    const [tableDataLoaded, setTableDataLoaded] = useState(false);
    const [pdfDownLoading, setPdfDownLoading] = useState(false);
  
    useEffect(() => {
      getDistrictList();
      getDeletedApplicationTableData("created_at", "1", "desc", "");
    }, []);
  
    const getDeletedApplicationTableData = async (sortBy, pageNo, orderBy, searchBy) => {
      try {
        setSearchData(searchBy);
        setOrderBy(orderBy);
        setSortBy(sortBy);
        const totalapplicationData = await getDeletedApplicationList(sortBy, orderBy, searchBy, pageNo, application_type);
        if (totalapplicationData?.status == 200) {
            const data = totalapplicationData?.data?.data
            setCurrentPage(pageNo > 0 ? pageNo - 1 : pageNo);
            setApplicationList(data);
            setTotalPages(
            Math.ceil(
              totalapplicationData?.data?.total /
              totalapplicationData?.data?.per_page
            )
          ); // Calculate total pages
        } else {
            setApplicationList([]);
            setApiMessage({ type: "error", message: totalapplicationData?.message });
        }
        setTableDataLoaded(true);
      } catch (err) { }
    };
  
    const getDistrictList = async () => {
      try {
        const districtData = await stateDistrict();
        const data = districtData?.data?.data?.map((district) => ({
          label: district?.name_en,
          value: district?.id,
        }));
        setDistrictList(data);
      } catch (err) {
        setApiMessage({ type: "error", message: err?.message });
      }
    };
  
    // delete Category
    const recoverApplication = async (obj) => {
        try {
            const formData = new FormData();
            formData.append("application_id", obj.id);
            const response = await recoverApplicationData(formData);
            if(response?.status == 200){
                setApiMessage({ type: "success", message: response?.message });
            }
            getDeletedApplicationTableData(sortBy, currentPage, orderBy, searchData);
            setRecoverData("");
        } catch (error) {
            //console.error(error);
        }
    };
    
    const handlePageChange = (selectedPage) => {
        getDeletedApplicationTableData(sortBy, selectedPage.selected + 1, orderBy, searchData); 
    };

    const pdfDownload = async () => {
        try {
            setPdfDownLoading(true)
            const response = await disabledApplicationListPdf(application_type)
            setPdfDownLoading(false)
            window.open(`${PdfBaseUrl()}/${response.folder_path}/${response.file_name}`);
        } catch (err) {
            setPdfDownLoading(false) 
              setApiMessage({ type: "error", message: err?.message })
        }
    }
        
    const excelDownload = async () => {
        try {
            const response = await disabledApplicationListExcel(application_type)
            window.open(response?.file_path);
        } catch (err) {
            setApiMessage({ type: "error", message: err?.message })
        }
    }
        
    const csvDownload = async () => {
        try {
            const response = await disabledApplicationListCsv(application_type)
            window.open(response?.file_path);
        } catch (err) {
            setApiMessage({ type: "error", message: err?.message })
        }
    }
        
    const exportPrint = async () => {
            try {
              // Fetch the PDF URL from the API
              const response = await disabledApplicationListPdf(application_type);
              if(response) {
                printData(response)
              }
              
            } catch (err) {
              setApiMessage({ type: "error", message: err?.message });
            }
    }

    return (
      <AdminDashboard>
           <div className="aod-outer">
          {apiMessage && (<Message apiMessage={apiMessage} setApiMessage={setApiMessage}></Message>)}
          <div className="ap-breadcrumb pt-2 pb-2 mb-2 adm-breadcrumb">
            <div>
              <HomeIcon />
              <b onClick={() => navigate("/admin/")}>Home / </b>
              <span>Disabled Applications</span>
            </div>
            <div className="dropdown download_file_dropdown ms-auto d-flex gap-2 mb-3 flex-wrap align-items-center">
            {pdfDownLoading ? <a className=" px-2 btn btn-danger btn-sm"> <i className="fa fa-file-pdf me-1" ></i>
                <span>PDF</span>
                <Spinner animation="border" className="pdf-spinner" role="status" style={{ 'marginLeft': '5px' }}>
                  <span className="visually-hidden"></span>
                </Spinner>
              </a> : 
              <a className=" px-2 btn btn-danger btn-sm" onClick={() => pdfDownload()} > <i className="fa fa-file-pdf me-1" ></i> PDF</a>}
             <a className=" px-2 btn btn-success btn-sm"  onClick={() => excelDownload()} ><i className="fa fa-file-excel  me-1"></i>
                            Excel </a>
                        {/* <a className=" px-2 btn btn-primary btn-sm" onClick={() => csvDownload()} ><i className="fa fa-file-csv  me-1"></i>
                            CSV</a> */}
                <a className=" px-2 btn btn-info  btn-sm" onClick={() => exportPrint()}><i className="fa fa-print me-1"></i>
                    Print</a>
            </div> 
          </div>
          <div className="aod-inner pt-0">
            <div className="aod-bottom">
              <div className="adm-tabs-outer">
                <h4 className="mb-0 w-100">Disabled Applications</h4>
                <div className="position-relative w-25">
                  <input
                    className="px-2 form-control"
                    placeholder="Search"
                    type="text"
                    value={searchTerm} // Add a state for the input value
                    onChange={(e) => {
                      setSearchTerm(e.target.value);// Update the state
                      getDeletedApplicationTableData(sortBy, 1, orderBy, e.target.value);
                    }}
                  />
                  {searchTerm && ( // Show the clear button only when there's text
                    <button
                      className="btn btn-clear position-absolute"
                      onClick={(e) => {
                        setSearchTerm(""); // Clear the input value
                        getDeletedApplicationTableData(sortBy, 1, orderBy, ""); // Fetch data with empty search term
                      }}
                      style={{
                        top: "50%",
                        right: "10px",
                        transform: "translateY(-50%)",
                        border: "none",
                        background: "transparent",
                        fontSize: "1rem",
                        cursor: "pointer",
                      }}
                    >
                      &times; {/* This is the "X" icon */}
                    </button>
                  )}
                </div>
              </div>
              <div className="aod-head"></div>
              <div className="ad-reg-table">
                <div className="ad-reg-table">
                  <Table size="sm" className="ad-cat-table mt-4">
                    <thead>
                      <tr>
                        <th className="ad-sno">S. No</th>
                        <th
                          className="ad-long cursor-pointer"
                          onClick={(e) =>
                            getDeletedApplicationTableData(
                                "sub_category_name",
                                currentPage + 1,
                                orderBy === "asc" ? "desc" : "asc",
                                searchData
                            )
                          }
                        >
                          Sub category{" "}
                          <span>
                            <i className="fa-solid fa-sort"></i>
                          </span>
                        </th>
                        <th
                          className="ad-long cursor-pointer"
                          onClick={(e) => 
                            getDeletedApplicationTableData(
                                "district_name",
                                currentPage + 1,
                                orderBy === "asc" ? "desc" : "asc",
                                searchData
                            )}
                        >
                          District{" "}
                          <span>
                            <i className="fa-solid fa-sort"></i>
                          </span>{" "}
                        </th>
                        <th
                          className="ad-long cursor-pointer"
                          onClick={(e) => 
                            getDeletedApplicationTableData(
                                "tracking_number",
                                currentPage + 1,
                                orderBy === "asc" ? "desc" : "asc",
                                searchData
                            )}
                        >
                          Tracking Number{" "}
                          <span>
                            <i className="fa-solid fa-sort"></i>
                          </span>
                        </th>
                        <th
                          className="ad-long cursor-pointer"
                          onClick={(e) => 
                            getDeletedApplicationTableData(
                                "customer_id",
                                currentPage + 1,
                                orderBy === "asc" ? "desc" : "asc",
                                searchData
                            )}
                        >
                          Customer Id{" "}
                          <span>
                            <i className="fa-solid fa-sort"></i>
                          </span>
                        </th>
                        <th
                          className="ad-long cursor-pointer"
                          onClick={(e) => 
                            getDeletedApplicationTableData(
                                "deleted_at",
                                currentPage + 1,
                                orderBy === "asc" ? "desc" : "asc",
                                searchData
                            )}
                        >
                          Deleted At{" "}
                          <span>
                            <i className="fa-solid fa-sort"></i>
                          </span>
                        </th>
                        <th className="ad-long">Status</th>
                        <th className="ad-long">Actions</th>
                      </tr>
                    </thead>
                    <tbody>
                      {applicationList?.length > 0 ? (
                        applicationList?.map((item, index) => (
                          <tr
                            key={index}
                            className={index % 2 != 0 ? "adm-even" : ""}
                          >
                            <td>{currentPage * 10 + (index + 1)}</td>
                            <td>
                              {item?.sub_category_name
                                ? item?.sub_category_name
                                : "--"}
                            </td>
                            <td>
                              {item?.district_name ? item?.district_name : "--"}
                            </td>
                            <td>
                              {item?.tracking_number ? item?.tracking_number : "--"}
                            </td>
                            <td>{item?.customer_id ? item?.customer_id : "--"}</td>
                            <td>
                              {item?.deleted_at
                                ? formatDateWithSlash(item?.deleted_at)
                                : "--"}
                            </td>
                            <td>
                              Disabled
                            </td>
  
                            <td>
                              <div
                                className="action-btn d-flex"
                              >
                                <span onClick={() => navigate("/admin/application-view", { state: { data: item, pageFrom: pageFrom, editApplicationPermission : editApplicationPermission } })}>
                                    <OverlayTrigger
                                        placement="top"
                                        overlay={<Tooltip>View</Tooltip>}
                                    >
                                        <span className="ad-cat-edit">
                                        <EyeIcon />
                                        </span>
                                    </OverlayTrigger>
                                </span>
                                {deleteApplicationPermission ?
                                  <OverlayTrigger
                                  placement="top"
                                      overlay={
                                          <Tooltip id={`recover-tooltip-${item.id}`}>
                                          Recover
                                          </Tooltip>
                                      }
                                      >
                                      <span
                                          className="ad-cat-delete"
                                          onClick={() => setRecoverData(item)}
                                      >
                                          <CgSync />
                                      </span>
                                  </OverlayTrigger> : <></>}
                              </div>
                            </td>
                          </tr>
                        ))
                      ) : tableDataLoaded ? (
                        <NotFoundTable colSpan="8"></NotFoundTable>
                      ) : (
                        <></>
                      )}
                    </tbody>
                  </Table>
                  {totalPages > 1 && applicationList?.length > 0 && (
                    <div className="d-flex w-100 justify-content-end">
                      <ReactPaginate
                        previousLabel={"Previous"}
                        nextLabel={"Next"}
                        breakLabel={"..."}
                        pageCount={totalPages} // Total number of pages from API
                        marginPagesDisplayed={1}
                        pageRangeDisplayed={1}
                        onPageChange={handlePageChange} // Method to handle page click
                        containerClassName={"pagination justify-content-center"} // Custom CSS classes
                        pageClassName={"page-item"}
                        pageLinkClassName={"page-link"}
                        previousClassName={"page-item"}
                        previousLinkClassName={"page-link"}
                        nextClassName={"page-item"}
                        nextLinkClassName={"page-link"}
                        breakClassName={"page-item"}
                        breakLinkClassName={"page-link"}
                        activeClassName={"active"}
                      />
                    </div>
                  )}
                </div>
              </div>
            </div>
          </div>
        </div>
        <Modal show={recoverData?.id} onHide={() => setRecoverData("")}>
            <Modal.Header closeButton>
            <Modal.Title>
                Do you really want to recover this Application ?
            </Modal.Title>
            </Modal.Header>
            <Modal.Footer>
            <div className="suf-btn p-2 d-flex flex-row">
                <button
                className="mx-2"
                onClick={() => {
                    recoverApplication(recoverData);
                }}
                >
                Yes
                </button>
                <button
                    className="suf-can-butt no-btn mx-2"
                    onClick={() => setRecoverData("")}
                >
                    No
                </button>
            </div>
            </Modal.Footer>
        </Modal>
      </AdminDashboard>
    )
}

export default DisableApplications