Notes

import Link from "next/link";
import React, { useEffect, useState } from "react";
import { BsCheckCircle } from "react-icons/bs";
import { AiFillYoutube } from "react-icons/ai";
import { IoClose } from "react-icons/io5";
import YouTube from "react-youtube";
import {
collection,
doc,
getDoc,
getDocs,
orderBy,
query,
} from "firebase/firestore";
import { auth, firestore } from "@/firebase/firebase";
import { DBProblem } from "@/utils/types/problem";
import { useAuthState } from "react-firebase-hooks/auth";

function myFunction(textToCopy) {
navigator.clipboard.writeText(textToCopy);
alert("Copied the text: " + textToCopy);
}

function parseSolutionString(solutionString: string): string{

return solutionString.replace(/(;|{|})/g, (match)=>`${match}n`);

}


type ProblemsTableProps = {
setLoadingProblems: React.Dispatch<React.SetStateAction<boolean>>;
};

const ProblemsTable: React.FC<ProblemsTableProps> = ({
setLoadingProblems,
}) => {
const [youtubePlayer, setYoutubePlayer] = useState({
isOpen: false,
videoId: "",
});

// const [textSolutions, setTextSolutions] = useState({});
const [textSolutions, setTextSolutions] = useState({
isOpen: false,
textId: "",
});
const [displaySolutions, setDisplaySolutions] = useState({
isOpen: false,
textId: "",
});

const problems = useGetProblems(setLoadingProblems);
console.log(problems)
const solvedProblems = useGetSolvedProblems();

const closeModal = () => {
setYoutubePlayer({ isOpen: false, videoId: "" });
setTextSolutions({isOpen:false, textId: ""});
};

useEffect(() => {
const fetchSolutions = async () => {
try {
const solutions = {};
for (const problem of problems) {
// const docRef = doc(firestore, "problems", problem.textId);
// const docSnap = await getDoc(docRef);
// if (docSnap.exists()) {
// solutions[problem.textId] = docSnap.data().solution;
// } else {
// console.error("Document does not exist:", problem.textId);
// }
console.log("Type of solutions:", typeof problem.textId);

if (typeof problem.textId === 'string') {
solutions[problem.textId] = parseSolutionString(problem.textId);
} else {
solutions[problem.textId] = "coming soon";
}

}

console.log("Solutions:",solutions);
// console.log("Type of solutions:", typeof solutions);


// setTextSolutions(solutions);
console.log("Solutions:", textSolutions);
} catch (error) {
console.error("Error fetching solutions:", error);
}
};
console.log("Solutions:", textSolutions);
if (problems && problems.length > 0) {
fetchSolutions();
}
}, [problems]);


useEffect(() => {
const handleEsc = (e: KeyboardEvent) => {
if (e.key === "Escape") closeModal();
};
window.addEventListener("keydown", handleEsc);

return () => window.removeEventListener("keydown", handleEsc);
}, []);

return (
<>
<tbody className="text-white">
{problems.map((problem, idx) => {
const difficulyColor =
problem.difficulty === "Easy"
? "text-dark-green-s"
: problem.difficulty === "Medium"
? "text-dark-yellow"
: "text-dark-pink";
return (
<tr
className={`${idx % 2 == 1 ? "bg-dark-layer-1" : ""}`}
key={problem.id}
>
<th className="px-2 py-4 font-medium whitespace-nowrap text-dark-green-s">
{solvedProblems.includes(problem.id) && (
<BsCheckCircle fontSize={"18"} width="18" />
)}
</th>
<td className="px-6 py-4">
{problem.link ? (
<Link
href={problem.link}
className="hover:text-blue-600 cursor-pointer"
target="_blank"
>
{problem.title}
</Link>
) : (
<Link
className="hover:text-blue-600 cursor-pointer"
href={`/problems/${problem.id}`}
>
{problem.title}
</Link>
)}
</td>
<td className={`px-6 py-4 ${difficulyColor}`}>
{problem.difficulty}
</td>
<td className={"px-6 py-4"}>{problem.category}</td>
<td className={"px-6 py-4"}>
{problem.videoId ? (
<AiFillYoutube
fontSize={"28"}
className="cursor-pointer hover:text-red-600"
onClick={() =>
setYoutubePlayer({
isOpen: true,
videoId: problem.videoId as string,
})
}
/>
) : (
<p className="text-gray-400">Coming soon</p>
)}
</td>

{/* textsolution */}

<td className={"px-6 py-4"}>
{problem.textId ? (
<p onClick={() =>
setTextSolutions({
isOpen: true,
textId: parseSolutionString(problem.textId),
})
}> Click here </p>
) : (
<p className="text-gray-400">Coming soon</p>
)}
</td>

</tr>
);
})}
</tbody>
{youtubePlayer.isOpen && (
<tfoot className="fixed top-0 left-0 h-screen w-screen flex items-center justify-center">
<div
className="bg-black z-10 opacity-70 top-0 left-0 w-screen h-screen absolute"
onClick={closeModal}
></div>
<div className="w-full z-50 h-full px-6 relative max-w-4xl">
<div className="w-full h-full flex items-center justify-center relative">
<div className="w-full relative">
<IoClose
fontSize={"35"}
className="cursor-pointer absolute -top-16 right-0"
onClick={closeModal}
/>
<YouTube
videoId={youtubePlayer.videoId}
loading="lazy"
iframeClassName="w-full min-h-[500px]"
/>
</div>
</div>
</div>
</tfoot>
)}
{/* //text textSolution */}
{textSolutions.isOpen && (
<tfoot className="fixed top-0 left-0 h-screen w-screen flex items-center justify-center">
<div
className="bg-black z-10 opacity-70 top-0 left-0 w-screen h-screen absolute"
onClick={closeModal}
></div>
<div className="w-full z-50 h-full px-6 relative max-w-4xl">
<div className="w-full h-full flex items-center justify-center relative">
<div className="w-full relative">
<IoClose
fontSize={"35"}
className="cursor-pointer absolute -top-16 right-0"
onClick={closeModal}
/>

<div className="" style={{}}>
<nav className="" style={{
display: 'flex',
justifyContent: 'space-between',
height: '70px',
backgroundColor: '#393e46',
borderTopLeftRadius: '10px',
borderTopRightRadius: '10px',
alignItems: 'center',
color: '#ff9a3c',
padding: '0 20px', // Added padding for better spacing
fontFamily:'monospace' ,
fontSize:'19px',
fontWeight:'bold'
}}>
Solution
<button
style={{
border: "2px solid black",
height: "30px",
width: "80px",
color: "black",
borderRadius: "5px",
backgroundColor: "#ff9a3c",
}}
onClick={() => myFunction(textSolutions.textId)}
>
Copy?
</button>
</nav>

<div
className=""
id="forCopy"
style={{
height: '200px',
backgroundColor: '#222831',
overflowY: 'scroll',
scrollbarColor: 'unset',
scrollbarWidth: 'auto',
borderBottomLeftRadius: '10px',
borderBottomRightRadius: '10px',
padding: '10px', // Added padding for better spacing
color: 'white'
}}
>
{textSolutions.textId ? (
textSolutions.textId.split('n').map((line, index) => (
<div key={index}>{line}</div>
))
) : (
<div>No text available</div>
)}
</div>

</div>

</div>
</div>
</div>
</tfoot>
)}

</>
);
};
export default ProblemsTable;

function useGetProblems(
setLoadingProblems: React.Dispatch<React.SetStateAction<boolean>>
) {
const [problems, setProblems] = useState<DBProblem[]>([]);

useEffect(() => {
const getProblems = async () => {
setLoadingProblems(true);
const q = query(
collection(firestore, "problems"),
orderBy("order", "asc")
);
const querySnapshot = await getDocs(q);
const tmp: DBProblem[] = [];
querySnapshot.forEach((doc) => {
tmp.push({ id: doc.id, ...doc.data() } as DBProblem);
});
setProblems(tmp);
setLoadingProblems(false);
};

getProblems();
}, [setLoadingProblems]);
return problems;
}

function useGetSolvedProblems() {
const [solvedProblems, setSolvedProblems] = useState<string[]>([]);
const [user] = useAuthState(auth);

useEffect(() => {
const getSolvedProblems = async () => {
const userRef = doc(firestore, "users", user!.uid);
const userDoc = await getDoc(userRef);

if (userDoc.exists()) {
setSolvedProblems(userDoc.data().solvedProblems);
}
};

if (user) getSolvedProblems();
if (!user) setSolvedProblems([]);
}, [user]);

return solvedProblems;
}