import React, { useContext } from "react";
import { useEffect, useState } from "react";
import ReactApexChart from "react-apexcharts";
import { ConfigContext } from "../../Context/ConfigContext";
import axios from "axios";
import { Link } from "react-router-dom";
import { DateFormaterMonth } from "../../Components/GlobalFunctions";
import { ContentLoader } from "../../Components/Shimmer";

const ActiveProject = () => {

  const { apiURL, apiHeaderJson } = useContext(ConfigContext);
  const [rows, setRows] = useState([]);
  const [loadingList, setLoadingList] = useState(false);

  const GetList = async () => {
    try {
      setLoadingList(true);
      const headers = apiHeaderJson;
      const response = await axios.get(`${apiURL}api/GetDashboard`, { headers });

      const allProjects = response.data.data.tabs.total_projects;

      const activeOnly = allProjects.filter(project => project.project_status === 0);

      setRows(activeOnly);
    } catch (error) {
      console.error("Error fetching projects:", error);
    } finally {
      setLoadingList(false);
    }
  };


  const GetStatus = (status) => {
    if (status == '0') {
      return "Active"
    } else if (status == '1') {
      return "Completed"
    } else if (status == '2') {
      return "Cancelled"
    }
  }


  const GetBadge = (status) => {
    if (status == '0') {
      return "badge bg-info-subtle text-info"
    } else if (status == '1') {
      return "badge bg-success-subtle text-success"
    } else if (status == '2') {
      return "badge bg-warning-subtle text-warning"
    }

  }

  useEffect(() => {
    GetList();
    setLoadingList(true);

  }, [])

  return (
    <>
      <div className="card-header align-items-center d-flex">
        <h4 className="card-title mb-0 flex-grow-1">Active Project </h4>
      </div>
      {
        loadingList ? <ContentLoader /> :
          <>
            <div
              data-simplebar="init"
              style={{ height: '80vh' }}
              className="simplebar-scrollable-y"
            >
              <div className="simplebar-wrapper" style={{ margin: 0 }}>
                <div className="simplebar-height-auto-observer-wrapper">
                  <div className="simplebar-height-auto-observer" />
                </div>
                <div className="simplebar-mask">
                  <div className="simplebar-offset" style={{ right: 0, bottom: 0 }}>
                    <div
                      className="simplebar-content-wrapper"
                      tabIndex={0}
                      role="region"
                      aria-label="scrollable content"
                      style={{ height: "auto", overflow: "hidden scroll" }}
                    >
                      <div className="simplebar-content" style={{ padding: 0 }}>
                        {rows?.length !== 0 ? (
                          rows?.map((row) => (
                            <div className={`list-group ${row === 0 ? '' : ' mt-3'} px-3`} key={row.project_id}>
                              <Link to={`/ProjectProfile/${row.project_id}`} className="list-group-item list-group-item-action mt-3">
                                <div className="float-end">
                                  <span className={GetBadge(row.project_status)}>{GetStatus(row.project_status)}</span>
                                </div>
                                <div className="d-flex mb-2 align-items-center">
                                  <div className="flex-shrink-0">
                                    <img
                                      src={`https://tms.atctransline.in/apis/api/project-logo/${row.project_logo}`}
                                      alt="Project Logo"
                                      className="avatar-sm rounded-circle"
                                      onError={(e) => {
                                        e.target.src = "https://contractor.atctransline.in/assets/images/users/Noicon.jpeg";
                                      }}
                                    />
                                  </div>
                                  <div className="flex-grow-1 ms-3">
                                    <h5 className="list-title fs-15 mb-1">{row.project_title}</h5>
                                    {/* <p className="list-text mb-0 fs-12">{row.project_description}</p> */}
                                    <p className="list-text mb-0 fs-12">{DateFormaterMonth(row.project_start_date)}{" "} {" To "} {" "}{DateFormaterMonth(row.project_end_date)}</p>
                                  </div>
                                </div>
                                <div className="row mb-3 mt-3">
                                  <div className="col-12 col-md-12">
                                    <div className="d-flex">
                                      <div className="flex-shrink-0 avatar-xs align-self-center me-3">
                                        <div className="avatar-title bg-light rounded-circle fs-16 text-dark">
                                          <i className="ri-profile-line" />
                                        </div>
                                      </div>
                                      <div className="flex-grow-1 overflow-hidden">
                                        <p className="mb-1">Project Description :</p>
                                        <h6 className="text-truncate">
                                          <a href="#" className="fw-semibold text-dark">{row.project_description}</a>
                                        </h6>
                                      </div>
                                    </div>
                                  </div>
                                  <div className="col-12 col-md-12">
                                    <div className="d-flex">
                                      <div className="flex-shrink-0 avatar-xs align-self-center me-3">
                                        <div className="avatar-title bg-light rounded-circle fs-16 text-dark">
                                          <i className="ri-map-pin-line" />
                                        </div>
                                      </div>
                                      <div className="flex-grow-1 overflow-hidden">
                                        <p className="mb-1">Location :</p>
                                        <a href="#" className="fw-semibold text-dark">{row.project_address}</a>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </Link>
                            </div>
                          ))
                        ) : (
                          <div className="d-flex justify-content-center align-items-center" style={{ height: '60vh' }}>
                            <h3 className="text-muted">No Data Found...!</h3>
                          </div>
                        )}
                      </div>

                    </div>
                  </div>
                </div>
                <div
                  className="simplebar-placeholder"
                  style={{ width: 358, height: 303 }}
                />
              </div>
              <div
                className="simplebar-track simplebar-horizontal"
                style={{ visibility: "hidden" }}
              >
                <div
                  className="simplebar-scrollbar"
                  style={{ width: 0, display: "none" }}
                />
              </div>
              <div
                className="simplebar-track simplebar-vertical"
                style={{ visibility: "visible" }}
              >
                <div
                  className="simplebar-scrollbar"
                  style={{
                    height: 152,
                    transform: "translate3d(0px, 0px, 0px)",
                    display: "block"
                  }}
                />
              </div>
            </div>
          </>
      }



    </>
  );
};

export default ActiveProject;
