import React, { useEffect, useState } from "react";
import moment from "moment";
import { formatNumber, formatUTCToLocalTime, getDateDifferenceInDays } from "../../../utils/dateUtils";
import { useNavigate } from "react-router-dom";
import ManageProjectInfo from "../../Project/ManageProjectInfo";
import ProjectRepository from "../../../repositories/ProjectRepository";
import { cacheData, getCachedData } from "../../../slices/apiDataManager";
import showToast from "../../../services/toastService";
import { useHasUserPermission } from "../../../hooks/useHasUserPermission";
import { MANAGE_PROJECT } from "../../../utils/constants";
import GlobalModel from "../../common/GlobalModel";
import { useDispatch } from "react-redux";
import { setProjectId } from "../../../slices/localVariablesSlice";
import { useProjectContext } from "../../../pages/project/ProjectPage";
import { useActiveInActiveServiceProject } from "../../../hooks/useServiceProject";
import ConfirmModal from "../../common/ConfirmModal";
import { getProjectStatusColor, getProjectStatusName } from "../../../utils/projectStatus";

const ServiceProjectCard = ({ project, isCore = true }) => {
    const [deleteProject, setDeleteProject] = useState({
        project: null,
        isOpen: false,
    });
    const dispatch = useDispatch();
    const navigate = useNavigate();
    const ManageProject = useHasUserPermission(MANAGE_PROJECT);
    const { setMangeProject, setManageServiceProject } = useProjectContext();

    const getProgress = (planned, completed) => {
        return (completed * 100) / planned + "%";
    };
    const getProgressInNumber = (planned, completed) => {
        return (completed * 100) / planned;
    };

    const handleClose = () => setShowModal(false);

    const handleViewProject = () => {
        if (isCore) {
            dispatch(setProjectId(project.id));
            navigate(`/projects/details`);
        } else {
            navigate(`/service-projects/${project.id}`);
        }
    };
    const handleViewActivities = () => {
        dispatch(setProjectId(project.id));
        navigate(`/activities/records?project=${project.id}`);
    };
    const handleManage = () => {
        if (isCore) {
            setMangeProject({
                isOpen: true,
                Project: project.id,
            });
        } else {
            setManageServiceProject({
                isOpen: true,
                project: project.id,
            });
        }
    };

    const { mutate: DeleteProject, isPending } = useActiveInActiveServiceProject(
        () => setDeleteProject({ project: null, isOpen: false })
    );
    const handleActiveInactive = (projectId) => {
        DeleteProject(projectId, false);
    };

    return (
        <>
            <ConfirmModal
                type="delete"
                header="Delete Project"
                message="Are you sure you want delete?"
                onSubmit={handleActiveInactive}
                onClose={() => setDeleteProject({ project: null, isOpen: false })}
                loading={isPending}
                paramData={project.id}
                isOpen={deleteProject.isOpen}
            />
            <div className="col-md-6 col-lg-4 col-xl-4 order-0 mb-4">
                <div className={`card cursor-pointer`}>
                    <div className="card-header pb-4">
                        <div className="d-flex align-items-start">
                            <div className="d-flex align-items-center">
                                <div className="avatar me-4">
                                    <i
                                        className="rounded-circle bx bx-building-house"
                                        style={{ fontSize: "xx-large" }}
                                    ></i>
                                </div>
                                <div className="me-2">
                                    <h5
                                        className="mb-0 stretched-link text-heading text-start"
                                        onClick={handleViewProject}
                                    >
                                        {project?.shortName ? project?.shortName : project?.name}
                                    </h5>
                                    <div className="client-info text-body">
                                        <span>{project?.shortName ? project?.name : ""}</span>
                                    </div>
                                </div>
                            </div>
                            <div className={`ms-auto ${!ManageProject && "d-none"}`}>
                                <div className="dropdown z-2">
                                    <button
                                        type="button"
                                        className="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0"
                                        data-bs-toggle="dropdown"
                                        aria-expanded="false"
                                    >
                                        <i
                                            className="bx bx-dots-vertical-rounded bx-sm text-muted"
                                            data-bs-toggle="tooltip"
                                            data-bs-offset="0,8"
                                            data-bs-placement="top"
                                            data-bs-custom-class="tooltip-dark"
                                            title="More Action"
                                        ></i>
                                    </button>
                                    <ul className="dropdown-menu dropdown-menu-end">
                                        <li>
                                            <a
                                                aria-label="click to  View details"
                                                className="dropdown-item"
                                                onClick={handleViewProject}
                                            >
                                                <i className="bx bx-detail me-2"></i>
                                                <span className="align-left">View details</span>
                                            </a>
                                        </li>

                                        <li>
                                            <a className="dropdown-item" onClick={handleManage}>
                                                <i className="bx bx-pencil me-2"></i>
                                                <span className="align-left">Modify</span>
                                            </a>
                                        </li>
                                        {isCore && (
                                            <li onClick={handleViewActivities}>
                                                <a className="dropdown-item">
                                                    <i className="bx bx-task me-2"></i>
                                                    <span className="align-left">Activities</span>
                                                </a>
                                            </li>
                                        )}
                                        {!isCore && (
                                            <li
                                                onClick={() =>
                                                    setDeleteProject({ project: project, isOpen: true })
                                                }
                                            >
                                                <a className="dropdown-item">
                                                    <i className="bx bx-trash me-2"></i>
                                                    <span className="align-left">Delete</span>
                                                </a>
                                            </li>
                                        )}
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* Card View  */}

                    <div className="card-body pb-1">
                        <div className="d-flex align-items-center flex-wrap">
                            <div className="text-start mb-4 ms-2">
                                <div className="ms-11 mb-3">
                                    <p className="mb-0">
                                        <span
                                            className={
                                                "badge rounded-pill " +
                                                getProjectStatusColor(project?.status?.id)
                                            }
                                        >
                                            {getProjectStatusName(project?.status?.id)}
                                        </span>
                                    </p>
                                </div>

                                <p className="mb-1">
                                    <span className="text-heading fw-medium">Contact Person: </span>
                                    {project?.contactName || "NA"}
                                </p>

                                <p className="mb-1">
                                    <span className="text-heading fw-medium">Assigned Date: </span>
                                    {formatUTCToLocalTime(project?.assignedDate)}
                                </p>

                                <p className="mb-0">
                                    <span className="text-heading fw-medium">Address: </span>
                                    {project?.address || "NA"}
                                </p>


                                <p className="mb-0">{project?.projectAddress}</p>
                            </div>
                        </div>
                    </div>
                    <div className="card-body border-top">
                        <div className="d-flex align-items-center mb-4">

                        </div>
                    </div>
                </div>
            </div>
        </>
    );
};

export default ServiceProjectCard;