import React from 'react'
import { MdKeyboardArrowDown } from 'react-icons/md';

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

const DocumentPages = ({ selectedDocuments, setDropDownTogglePage, dropDownTogglePage }: DocumentPagesInterface) => {
    return (
        <div className='col-span-2 bg-white h-full p-4 overflow-y-auto'>

            <div className="flex flex-col gap-2">
                {selectedDocuments && selectedDocuments.length && selectedDocuments.map((document, indx) => {
                    return (
                        <div
                            key={indx}
                        // tabIndex={1}
                        // onBlur={() => setDropDownTogglePage('')}
                        >
                            <div
                                onClick={() => (`${(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={document.pages[0].src}
                                        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-1 flex-wrap'>
                                    {document.pages != undefined && document.pages.map((img, indx) => (
                                        <a
                                            href={"#" + document.documentId + indx}
                                            className='max-w-max px-4 py-2 shadow cursor-pointer border-1 rounded-sm border-slate-200 hover:border-[var(--primary)] transition-all duration-300 bg-slate-300'
                                        >
                                            <p className='text-center text-xs text-slate-600'>{indx + 1}</p>
                                        </a>
                                    ))}
                                </div>
                            }

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

export default DocumentPages