import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { RootState, AppDispatch } from "../../store/store";
import { updateSelectedDocuments } from "../../store/slices/selectedDocsSlice";

import { BsFiletypePdf, BsFiletypeDocx } from "react-icons/bs";
import { PiDotsThreeOutlineVerticalFill } from "react-icons/pi";
import { fetchDocuments } from "../../store/slices/documentSlice";
import { useNavigate } from "react-router-dom";
import { FaCheck } from "react-icons/fa";

const ShowDocs = () => {
    const dispatch = useDispatch<AppDispatch>();

    const navigate = useNavigate();
    // const signTypeGlobalState = useSelector((state: RootState) => state.selectedDocuments.signType);

    const documents = useSelector((state: RootState) => state.documents.documents);

    // Local state to track selected documents and sign type
    const [selectedDocs, setSelectedDocs] = useState<string[]>([]);
    // const [signType, setSignType] = useState<"self-sign" | "multiple-sign" | null>(null);

    // Handle checkbox selection
    const handleSelect = (docId: string) => {
        setSelectedDocs((prev) =>
            prev.includes(docId) ? prev.filter((id) => id != docId) : [...prev, docId]
        );
    };

    // Handle button click to update Redux state
    const handleUpdateSelectedDocs = () => {
        const selectedDocuments = documents.filter((doc) => selectedDocs.includes(doc.id));
        dispatch(updateSelectedDocuments({ documents: selectedDocuments }));
    };

    // Updating Redux State When Anywhere Sign Type is set ["self-sign" | "multiple-sign"]

    useEffect(() => {
        // if (signTypeGlobalState == null) return;
        handleUpdateSelectedDocs()
    }, [selectedDocs])


    // useEffect(() => {
    //     setTimeout(async () => {
    //         const res = await dispatch(fetchDocuments());
    //         if (res.meta.requestStatus == "rejected") {
    //             Object.keys(localStorage).forEach((key) => {
    //                 if (key.startsWith("persist:root-")) {
    //                     localStorage.removeItem(key);
    //                 }
    //             });
    //             window.location.href = "/login";
    //         }
    //     }, 1000)
    // }, []);

    return (
        <>
            {/* {documents.length > 0 && (
                <div className="flex flex-col gap-2 mb-3">
                    {documents.map((doc, idx) => (
                        <div key={doc.id} className="flex justify-between items-center bg-[var(--compBgCol)] px-4 py-2 rounded-md">
                            <div className="text-sm flex gap-4 items-center">
                                <input
                                    id={doc.name + idx}
                                    type="checkbox"
                                    checked={selectedDocs.includes(doc.id)}
                                    onChange={() => handleSelect(doc.id)}
                                />
                                <div className="flex gap-2 items-center">
                                    {doc.extension == "pdf" ? (
                                        <BsFiletypePdf className="text-lg text-red-400" />
                                    ) : (
                                        <BsFiletypeDocx className="text-lg text-blue-400" />
                                    )}
                                    <label htmlFor={doc.name + idx}>{doc.name}</label>
                                </div>
                            </div>
                            <p className="text-sm">.{doc.extension}</p>
                            <p className={`text-sm ${doc.original ? "text-blue-400" : "text-green-400"}`}>
                                {doc.original ? "Original" : "Signed"}
                            </p>
                            <CiMenuKebab className="cursor-pointer" />
                        </div>
                    ))}
                </div>
            )} */}

            {documents.length > 0 && (
                <div className="overflow-x-auto">
                    <table className="min-w-full text-xs text-left border border-gray-200 rounded shadow-sm bg-white">
                        <thead className="bg-gray-100 text-gray-700 uppercase text-xs tracking-wider">
                            <tr>
                                <th className="px-4 py-3"></th>
                                <th className="px-4 py-3">Name</th>
                                <th className="px-4 py-3 text-center">Type</th>
                                <th className="px-4 py-3 text-center">Status</th>
                                <th className="px-4 py-3 text-center"></th>
                            </tr>
                        </thead>
                        <tbody className="divide-y divide-gray-200">
                            {documents.map((doc, idx) => (
                                <tr onClick={() => handleSelect(doc.id)} key={doc.id} className="hover:bg-gray-50">
                                    <td className="px-4 py-3">
                                        {/* <input
                                            id={doc.name + idx}
                                            type="checkbox"
                                            checked={selectedDocs.includes(doc.id)}
                                            onChange={() => handleSelect(doc.id)}
                                            className="form-checkbox text-blue-600"
                                        /> */}

                                        <div className="w-5 h-5 rounded border-1 border-slate-300 flex justify-center items-center">
                                            {selectedDocs.includes(doc.id) && <FaCheck className="text-[var(--primary)]" />}
                                        </div>
                                    </td>
                                    <td className="px-4 py-3">
                                        <label htmlFor={doc.name + idx} className="flex items-center gap-2 cursor-pointer">
                                            {doc.extension == "pdf" ? (
                                                <BsFiletypePdf className="text-xl text-red-500" />
                                            ) : (
                                                <BsFiletypeDocx className="text-xl text-blue-500" />
                                            )}
                                            {doc.name}
                                        </label>
                                    </td>
                                    <td className="px-4 py-3 text-xs text-gray-600 text-center">
                                        <span className="bg-slate-100 px-2.5 py-0.5 rounded-xl">{doc.extension}</span>
                                    </td>
                                    <td className="text-center">
                                        <span className={`${doc.original ? "text-blue-600 bg-blue-100" : "text-green-600 bg-green-100"} text-xs px-2.5 py-1 rounded-xl`}>
                                            {doc.original ? "Original" : "Signed"}
                                        </span>
                                    </td>
                                    {/* <td className="px-4 py-3 text-center">
                                        <PiDotsThreeOutlineVerticalFill className="text-lg cursor-pointer text-slate-300 hover:text-black ml-[50%] translate-x-[-50%]" />
                                    </td> */}
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
            )}

        </>
    );
};

export default ShowDocs;