Dwinzo_dev/app/src/components/Dashboard/DashboardCard.tsx

import React, { useState, useRef, useEffect } from "react";
import img from "../../assets/image/image.png";
import { useNavigate } from "react-router-dom";
import { getUserData } from "./functions/getUserData";
import { useProjectName, useSocketStore } from "../../store/builder/store";
import { viewProject } from "../../services/dashboard/viewProject";
import OuterClick from "../../utils/outerClick";
import { KebabIcon } from "../icons/ExportCommonIcons";
import { getAllProjects } from "../../services/dashboard/getAllProjects";

interface DashBoardCardProps {
    projectName: string;
    thumbnail: any;
    projectId: string;
    createdAt?: string
    handleDeleteProject?: (projectId: string) => Promise<void>;
    handleTrashDeleteProject?: (projectId: string) => Promise<void>;
    handleRestoreProject?: (projectId: string) => Promise<void>;
    handleDuplicateWorkspaceProject?: (projectId: string, projectName: string, thumbnail: string) => Promise<void>;
    handleDuplicateRecentProject?: (projectId: string, projectName: string, thumbnail: string) => Promise<void>;
    active?: string;
    setIsSearchActive?: React.Dispatch<React.SetStateAction<boolean>>;
}
type RelativeTimeFormatUnit = any


const DashboardCard: React.FC<DashBoardCardProps> = ({
    projectName,
    thumbnail,
    projectId,
    active,
    handleDeleteProject,
    handleRestoreProject,
    handleTrashDeleteProject,
    handleDuplicateWorkspaceProject,
    handleDuplicateRecentProject,
    createdAt
}) => {
    const navigate = useNavigate();
    const { setProjectName } = useProjectName();
    const { userId, organization, userName } = getUserData();
    const [isKebabOpen, setIsKebabOpen] = useState(false);
    const [renameValue, setRenameValue] = useState(projectName);
    const [isRenaming, setIsRenaming] = useState(false);
    const { projectSocket } = useSocketStore();
    const kebabRef = useRef<HTMLDivElement>(null);
    const savedTheme = localStorage.getItem("theme") ?? "light";
    const navigateToProject = async (e: any) => {
        if (active && active == "trash") return
        try {
            const viewedProject = await viewProject(organization, projectId, userId);
            console.log("Viewed project:", viewedProject);
        } catch (error) {
            console.error("Error opening project:", error);
        }

        setProjectName(projectName);
        navigate(`/${projectId}`);
    };

    const handleOptionClick = async (option: string) => {
        switch (option) {
            case "delete":
                if (handleDeleteProject) {
                    await handleDeleteProject(projectId);
                }
                else if (handleTrashDeleteProject) {
                    await handleTrashDeleteProject(projectId);
                }
                break;
            case "restore":
                if (handleRestoreProject) {
                    await handleRestoreProject(projectId);
                }
                break;
            case "open in new tab":
                try {
                    await viewProject(organization, projectId, userId);
                    setProjectName(projectName); // optional depending on scope
                    setIsKebabOpen(false);
                } catch (error) {
                    console.error("Error opening project in new tab:", error);
                }
                window.open(`/${projectId}`, "_blank");
                break;
            case "rename":
                setIsRenaming(true);
                // setRenameValue(projectName);
                // Add rename logic here
                break;
            case "duplicate":
                if (handleDuplicateWorkspaceProject) {
                    await handleDuplicateWorkspaceProject(projectId, projectName, thumbnail);
                } else if (handleDuplicateRecentProject) {
                    await handleDuplicateRecentProject(projectId, projectName, thumbnail);
                }
                // try {
                //     // const project = await duplicateProject(
                //     //     projectId,
                //     //     savedTheme === "dark" ? darkThemeImage : lightThemeImage,
                //     //     projectName
                //     // );
                //     // console.log('project: ', project);
                //     // const duplicateProjectData = {
                //     //     userId,
                //     //     thumbnail: savedTheme === "dark" ? darkThemeImage : lightThemeImage,
                //     //     organization,
                //     //     projectUuid: projectId,
                //     //     projectName,
                //     // };
                //     // if (projectSocket) {
                //     //     // console.log('addProject: ', addProject);
                //     //     const handleResponse = (data: any) => {
                //     //         console.log('Project add response:', data);
                //     //         projectSocket.off("v1-project:response:Duplicate", handleResponse); // Clean up
                //     //     };
                //     //     projectSocket.on("v1-project:response:Duplicate", handleResponse);

                //     //     console.log('duplicate: ', duplicateProjectData);
                //     //     projectSocket.emit("v1:project:Duplicate", duplicateProjectData);

                //     //     const projects = await getAllProjects(userId, organization);
                //     //     console.log("after duplicate", projects);

                //     //     setIsSearchActive && setIsSearchActive(false)
                //     // }

                // } catch (error) {
                //     console.error("Error creating project:", error);
                // }
                // Add duplication logic here
                break;
            default:
                break;
        }
        setIsKebabOpen(false);
    };

    OuterClick({
        contextClassName: ["kebab-wrapper", "kebab-options-wrapper"],
        setMenuVisible: () => setIsKebabOpen(false),
    });
    const handleProjectName = async (projectName: string) => {
        // setProjectName(projectName);
        setRenameValue(projectName)
        if (!projectId) return
        // localStorage.setItem("projectName", newName);
        try {

            const projects = await getAllProjects(
                userId, organization
            );
            console.log('projects: ', projects);
            let projectUuid = projects.Projects.find((val: any) => val.projectUuid === projectId || val._id === projectId)
            const updateProjects = {
                projectId: projectUuid,
                organization,
                userId,
                projectName,
                thumbnail: undefined
            }

            if (projectSocket) {
                const handleResponse = (data: any) => {
                    console.log('Project update response:', data);
                    projectSocket.off("v1-project:response:update", handleResponse); // Clean up
                };

                projectSocket.on("v1-project:response:update", handleResponse);

                projectSocket.emit("v1:project:update", updateProjects);
            }

            //API for projects rename
            // const updatedProjectName = await updateProject(
            //     projectId,
            //     userId,
            //     organization,
            //     undefined,
            //     projectName
            // );
            // 
        } catch (error) {

        }
    };

    function getRelativeTime(dateString: string): string {
        const date = new Date(dateString);
        const now = new Date();
        const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);

        const intervals: Record<RelativeTimeFormatUnit, number> = {
            year: 31536000,
            month: 2592000,
            week: 604800,
            day: 86400,
            hour: 3600,
            minute: 60,
            second: 1,
        };

        const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });

        for (const key in intervals) {
            const unit = key as RelativeTimeFormatUnit;
            const diff = Math.floor(diffInSeconds / intervals[unit]);
            if (diff >= 1) {
                return rtf.format(-diff, unit);
            }
        }
        return 'just now';
    }


    return (
        <button
            className="dashboard-card-container"
            onClick={navigateToProject}
            title={projectName}
        >
            <div className="dashboard-card-wrapper">
                <div className="preview-container">
                    {thumbnail ? (
                        <img src={thumbnail} alt="" />
                    ) : (
                        <img src={img} alt="" />
                    )}
                </div>
                <div className="project-details-container">
                    <div className="project-details">

                        {isRenaming ? (
                            <input
                                value={renameValue}
                                onChange={(e) => {
                                    e.stopPropagation(); // Prevents click from bubbling up
                                    handleProjectName(e.target.value);
                                }}
                                onBlur={() => {
                                    setIsRenaming(false);
                                    setProjectName(renameValue);
                                }}
                                onKeyDown={(e) => {
                                    if (e.key === "Enter") {
                                        setProjectName(renameValue);
                                        setIsRenaming(false);
                                    }
                                }}
                                autoFocus
                            />
                        ) : (
                            <span>{renameValue}</span>
                        )}

                        {createdAt && <div className="project-data">{active && active == "trash" ? `Trashed by you` : `Edited `}  {getRelativeTime(createdAt)}</div>}
                    </div>
                    <div className="users-list-container" ref={kebabRef}>
                        <div className="user-profile">
                            {userName ? userName.charAt(0).toUpperCase() : "A"}
                        </div>

                        <button
                            className="kebab-wrapper"
                            onClick={(e) => {
                                e.stopPropagation(); // Prevents click from bubbling up
                                console.log("Kebab menu clicked");
                                setIsKebabOpen((prev) => !prev);
                            }}
                        >
                            <KebabIcon />
                        </button>
                    </div>
                </div>
            </div>

            {isKebabOpen && active !== "trash" && (
                <div className="kebab-options-wrapper">
                    {["rename", "delete", "duplicate", "open in new tab"].map((option) => (
                        <button
                            key={option}
                            className="option"
                            title={""}
                            onClick={(e) => {
                                console.log(option);
                                e.stopPropagation();
                                handleOptionClick(option);
                            }}
                        >
                            {option}
                        </button>
                    ))}
                </div>
            )}
            {isKebabOpen && active && active == "trash" && (
                < div className="kebab-options-wrapper">
                    {["restore", "delete"].map((option) => (
                        <button
                            key={option}
                            className="option"
                            onClick={(e) => {
                                console.log("option", option);
                                e.stopPropagation();
                                handleOptionClick(option);
                            }}
                        >
                            {option}
                        </button>
                    ))}
                </div>
            )
            }
        </button >
    );
};

export default DashboardCard;