import axios from 'axios';
import React, { useContext, useEffect, useState } from 'react'
import { ConfigContext } from '../../Context/ConfigContext';
import { NavLink, useParams } from 'react-router-dom';
import { ContentLoader, NoRecords } from '../Shimmer';
import { DateFormaterMonth } from '../GlobalFunctions';

const RequestedInspection = () => {
  const { apiURL, apiHeaderJson, user_profile_id } = useContext(ConfigContext);
  const [inspectionRequestData, setInspectionRequestData] = useState([]);
  const [loadingList, setLoadingList] = useState(false);
  const { projectId } = useParams()

  const GetList = async () => {
    setLoadingList(true);
    try {
      const headers = apiHeaderJson;
      const response = await axios
        .get(`${apiURL}api/inspections/GetProjectInspectionsByProject`, { params: { project_id: projectId }, headers })
      const data = response.data;
      if (data.success) {
        setInspectionRequestData(data.data);
        // setNext(data.next);
        // setPrev(data.prev);
        // setPage(data.page);
        // setTotalRecords(data.total_records);
        // setTotalPages(data.total_pages);
        setLoadingList(false);
      }

    } catch (error) {
      console.log(error);

    } finally {
      setLoadingList(false);
    }
  };

  const getStatus = (status) => {
    if (status === "0") {
      return "Pending"
    }
    if (status === "1") {
      return "Approved"
    }
    if (status === "2") {
      return "Rejected"
    }
    if (status === "3") {
      return "Revise"
    }
    if (status === "4") {
      return "In-Clearence"
    }
  }
  const getBadge = (status) => {
    if (status === "0") {
      return "badge bg-warning-subtle text-warning"
    }
    if (status === "2") {
      return "badge bg-danger-subtle text-danger"
    }
    if (status === "1") {
      return "badge bg-success-subtle text-success"
    }
    if (status === "3") {
      return "badge bg-warning-subtle text-warning"
    }
    if (status === "4") {
      return "badge bg-secondary-subtle text-secondary"
    }
  }


  useEffect(() => {
    GetList()
  }, [])
  return (
    <div className="col-xxl-12">
      <div className="card">
        <div className="card-body">
          <div className='card-header align-items-center d-flex'>
            <div className="d-flex align-items-center mb-4">
              <h5 className="card-title flex-grow-1 mb-0"> Submittals List</h5>
            </div>


          </div>
          {
            loadingList ? <ContentLoader /> :
              <div className="row">
                <div className="col-lg-12">
                  <div className="table-responsive">
                    <table className="table table-borderless align-middle mb-0">
                      <thead className="table-light">
                        <tr>
                          <th scope="col">Project Name</th>
                          <th scope="col">Requested By</th>
                          <th scope="col">Requested For</th>
                          {/* <th scope="col">Request Date</th> */}
                          <th scope="col">Request Status</th>
                          <th scope="col">Action</th>
                        </tr>
                      </thead>
                      <tbody>
                        {inspectionRequestData?.length === 0 ? (
                          <tr>
                            <td colSpan="6">
                              <NoRecords />
                            </td>
                          </tr>
                        ) : (
                          inspectionRequestData?.map((item, index) => (
                            <tr key={index}>
                              <td>{item?.project_title}</td>
                              <td>{item?.contractor_name}</td>
                              <td>{item?.consultant_name}</td>
                              {/* <td>{DateFormaterMonth(item?.inspection_date)}</td> */}
                              {/* <td className={getBadge(item?.inspection_request_status)}>{getStatus(item?.inspection_request_status)}</td> */}
                              <td><span className={getBadge(item?.inspection_request_status)}>{getStatus(item?.inspection_request_status)}</span></td>
                              <td>
                                {
                                  // item?.inspection_request_status === "0" ? " " :
                                  item?.project_inspection_id  ? 
                                    <NavLink to={`/ViewInspection/${item?.project_inspection_id}`}>
                                      <button
                                        className="btn-icon btn btn-sm btn-outline-info"
                                      >
                                        <i className="ri-eye-line" ></i>
                                      </button>
                                    </NavLink>: " "
                                }

                              </td>
                            </tr>
                          ))
                        )}
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
          }


          {/*end row*/}
        </div>
        {/*end card-body*/}
      </div>


    </div>
  )
}

export default RequestedInspection