import React, { useState } from 'react'
import { MdKeyboardArrowDown, MdOutlineNavigateNext } from 'react-icons/md';
import { DocumentType } from './SignDocument';
import { GrFormPrevious } from 'react-icons/gr';

interface DocumentPagesInterface {
    selectedDocuments: DocumentType[] | null;
    setDropDownTogglePage: React.Dispatch<React.SetStateAction<string>>;
    dropDownTogglePage: string;
}

const DocumentPages = ({ selectedDocuments, setDropDownTogglePage, dropDownTogglePage }: DocumentPagesInterface) => {

    const [currentPage, setCurrentPage] = useState(0);

    return (
        <div className='p-4'>

            <div className="flex flex-col gap-2">
                {selectedDocuments && selectedDocuments.length && selectedDocuments.map((document, indx) => {
                   return (
                        <div
                            key={indx}
                        // tabIndex={1}
                        // onBlur={() => setDropDownTogglePage('')}
                        >
                            <div
                                onClick={() => {
                                    setDropDownTogglePage(`${(dropDownTogglePage === 'pageDropDown' + indx) ? '' : 'pageDropDown' + indx}`)
                                }
                                }
                                className={`p-2 ${(dropDownTogglePage === 'pageDropDown' + indx) ? "bg-[var(--primary)]" : "bg-slate-200"} flex flex-col justify-center items-center gap-2 rounded`}>
                                {
                                    document.pages != undefined && <img
                                        key={indx}
                                        className='rounded-sm shadow'
                                        src={"data:image/png;base64," + document.thumbnail}
                                        alt="" />
                                }

                                <div
                                    className={`flex items-center justify-between w-full text-xs rounded-sm cursor-pointer ${(dropDownTogglePage === 'pageDropDown' + indx) ? "text-slate-100" : "text-slate-600"}`}>
                                    <p className={`whitespace-nowrap overflow-hidden text-ellipsis max-w-[18ch]`}>{document.name}</p>
                                    <MdKeyboardArrowDown className={`${(dropDownTogglePage === 'pageDropDown' + indx) ? 'rotate-180' : ''}`} />
                                </div>
                            </div>


                            {
                                dropDownTogglePage === 'pageDropDown' + indx &&
                                <div className="my-1 flex justify-center items-center gap-2 flex-wrap">
                                    {/* Prev Button */}
                                    <a
                                        href={"#" + document.documentId + (currentPage - 1)}
                                        className={`cursor-pointer px-2 py-1 shadow rounded-sm text-sm bg-slate-200 hover:border-[var(--primary)] transition-all duration-300 ${currentPage === 0 ? "pointer-events-none opacity-50" : ""
                                            }`}
                                        onClick={(e) => {
                                            if (currentPage === 0) e.preventDefault();
                                            else setCurrentPage(currentPage - 1);
                                        }}
                                    >
                                        <GrFormPrevious />
                                    </a>

                                    {/* Page Selector */}
                                    <select
                                        className="w-[58px] py-1 text-xs text-slate-400 outline-none"
                                        value={currentPage}
                                        onChange={(e) => {
                                            const newPage = Number(e.target.value);
                                            setCurrentPage(newPage);
                                            window.location.hash = document.documentId + "" + newPage;
                                        }}
                                    >
                                        {document.pages != undefined && document.pages.map((_, pageIndex) => (
                                            <option key={pageIndex} value={pageIndex}>
                                                {pageIndex + 1}
                                            </option>
                                        ))}
                                    </select>

                                    <span className="text-xs text-slate-600">
                                        / {document.pages?.length}
                                    </span>

                                    {/* Next Button */}
                                    <a
                                        href={"#" + document.documentId + (currentPage + 1)}
                                        className={`cursor-pointer px-2 py-1 shadow rounded-sm text-sm bg-slate-200 hover:border-[var(--primary)] transition-all duration-300 ${currentPage === document.pages?.length - 1 ? "pointer-events-none opacity-50" : ""
                                            }`}
                                        onClick={(e) => {
                                            if (currentPage === document.pages?.length - 1) e.preventDefault();
                                            else setCurrentPage(currentPage + 1);
                                        }}
                                    >
                                        <MdOutlineNavigateNext />
                                    </a>
                                </div>
                            }

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

export default DocumentPages