import { useEffect, useState } from 'react';
import { RootState } from '../../../store/store';
import { useDispatch, useSelector } from 'react-redux';
import FieldList from './FieldList';

import { addColorsToRecipient, fetchRecipients, recipientType, toggleToTemplates, TRANSACTION_TEMPLATE_TOGGLE } from '../../../store/slices/selectedRecipientsSlice';

import { IoCheckmark } from 'react-icons/io5'
import { MdKeyboardArrowDown, MdOutlineNavigateNext } from 'react-icons/md'
import { useParams } from 'react-router-dom';
import { fetchDocuments } from '../../../store/slices/documentSlice';
import { GrFormPrevious } from 'react-icons/gr';
import { LuTableOfContents } from 'react-icons/lu';
import { IoIosDocument, IoMdClose } from 'react-icons/io';
import { FaAngleUp, FaChevronRight } from 'react-icons/fa';

interface LeftSideBarProps {
    isFields: boolean;
    isPages: boolean;
    selectedRecipientIndx: number;
    setSelectedRecipient: React.Dispatch<React.SetStateAction<number>>
    handleSetIsFields: (setTo: boolean) => void;
    handleSetIsPages: (setTo: boolean) => void;
}

const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, isPages, selectedRecipientIndx, setSelectedRecipient, handleSetIsFields, handleSetIsPages }) => {

    let transactionTemplateToggle = TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS;
    const dispatch = useDispatch();
    const params = useParams<{ accountId?: string; transactionId?: string; templateId?: string }>();
    const accountId = params.accountId;
    let transactionId = params.transactionId
    if (!transactionId) {
        transactionTemplateToggle = TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES;
        transactionId = params.templateId;
        dispatch(toggleToTemplates());
    }
    if (!accountId || !transactionId) {
        window.location.href = "/";
        return null;
    }


    const selectedRecipients = useSelector((state: RootState) => state.selectedRecipients.recipients)
    const selectedDocuments = useSelector((state: RootState) => state.documents.documents)

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

    useEffect(() => {
        if (selectedRecipients.length == 0) {
            dispatch(fetchRecipients({ accountId, transactionId }));
        }
    }, [dispatch, accountId, transactionId, selectedRecipients.length]);

    useEffect(() => {
        if (selectedDocuments.length == 0) {
            dispatch(fetchDocuments({ accountId, transactionId }));
        }
    }, [dispatch, accountId, transactionId, selectedDocuments.length]);

    // For Recipient
    const [dropDownToggle, setDropDownToggle] = useState(false);
    const [dropDownTogglePage, setDropDownTogglePage] = useState<string>("");

    const selectedRecipient = selectedRecipients[selectedRecipientIndx];

    useEffect(() => {
        if (selectedRecipients.length) {
            if ("color" in selectedRecipients[0]) return;
            dispatch(addColorsToRecipient())
        }
    }, [])


    useEffect(() => {
        if (selectedRecipient && selectedRecipient.type == recipientType.CC) {
            for (const [indx, recip] of selectedRecipients.entries()) {
                if (recip.type != recipientType.CC) {
                    setSelectedRecipient(indx);
                    break;
                }
            }
        };
    }, [selectedRecipient])

    if (selectedRecipient && selectedRecipient.type == recipientType.CC) {
        return <div className='col-span-2 bg-white h-full p-4 overflow-y-auto'></div>;
    }

    return (
        <>
            {/* Left Side Bar - START */}
            {
                (isPages || isFields) && <div className={`sm:block p-4 absolute top-[48px] sm:top-[0] rounded-tr-md z-50 sm:relative sm:col-span-2 bg-white border-t-1 border-r-1 border-slate-300 h-[calc(100vh-40px)] overflow-y-auto`}>
                    <div
                        onClick={() => {
                            handleSetIsPages(false)
                            handleSetIsFields(false)
                        }}
                        className='absolute top-[5px] right-[5px] bg-white rounded-full'>
                        <IoMdClose />
                    </div>

                    <div className='hidden sm:flex flex-col md:flex-row justify-between items-center bg-slate-100 p-1.5 rounded-2xl border-1 border-gray-200 mb-3'>
                        <div
                            onClick={() => handleSetIsFields(!isFields)}
                            className={`flex items-center gap-1 cursor-pointer text-xs w-full justify-center py-1.5 rounded-2xl ${isFields ? 'bg-[var(--primary)] text-white' : ''} transition-all duration-300`}>
                            <LuTableOfContents />
                            <p className='tracking-wide'>Tags</p>
                        </div>

                        <div
                            onClick={() => handleSetIsPages(!isPages)}
                            className={`flex items-center gap-1 cursor-pointer text-xs w-full justify-center py-1.5 rounded-2xl ${isPages ? 'bg-[var(--primary)] text-white' : ''} transition-all duration-300`}>
                            <IoIosDocument />
                            <p className='tracking-wide'>Pages</p>
                        </div>
                    </div>


                    {selectedRecipients.length > 0 && isFields && <>
                        {/* Fields List and Recipeint - Start */}
                        {/* Side Bar showing Recipients */}
                        <div className='relative'
                            tabIndex={0}
                            onBlur={() => setDropDownToggle(false)}>
                            {/* Selected Recipient */}
                            <div
                                id='switch-recipients-left'
                                onClick={() => setDropDownToggle(!dropDownToggle)}
                                className='flex items-center justify-between gap-2 w-full p-2 text-xs rounded-sm border-1 border-slate-200 cursor-pointer'>
                                <div className='flex items-center gap-1.5'>
                                    <p className='w-3 h-3 rounded-sm' style={{ background: selectedRecipient.color }}></p>
                                    {/* <FaUserTie className='w-3 h-3 text-2xl mt-[1px]' style={{ color: selectedRecipient.color }} /> */}
                                    <p>
                                        {
                                            selectedRecipient.firstName.length == 0 && selectedRecipient.lastName.length == 0 ?
                                                (selectedRecipient.email.length == 0 ? selectedRecipient.roleName : selectedRecipient.email) :
                                                `${selectedRecipient.firstName + " " + selectedRecipient.lastName}`
                                        }
                                    </p>
                                </div>
                                <MdKeyboardArrowDown />
                            </div>

                            <div
                                className={`absolute w-full shadow-md rounded-md mt-1 px-2 py-1 z-20 bg-white ${dropDownToggle ? '' : 'hidden'}`}>
                                {selectedRecipients.length && selectedRecipients.map((recipient, indx) => {
                                    if (recipient.type == recipientType.CC) return null; // Skip CC recipients
                                    return (<div
                                        key={indx}
                                        className='flex items-center justify-between gap-2 w-full p-2 text-xs rounded-sm cursor-pointer hover:bg-slate-100'
                                        onClick={() => {
                                            setSelectedRecipient(indx);
                                            setTimeout(() => {
                                                setDropDownToggle(false);
                                            }, 0)
                                        }}
                                    >
                                        <div className='flex items-center gap-1.5'>
                                            <p className='w-3 h-3 rounded-sm' style={{ background: recipient.color }}></p>
                                            {/* <FaUser className='w-3 h-3 text-2xl mt-[1px]' style={{ color: recipient.color }} /> */}
                                            <p>
                                                {
                                                    recipient.firstName.length == 0 && recipient.lastName.length == 0 ?
                                                        (recipient.email.length == 0 ? recipient.roleName : recipient.email) :
                                                        `${recipient.firstName + " " + recipient.lastName}`
                                                }
                                            </p>
                                        </div>
                                        {selectedRecipientIndx == indx && <IoCheckmark className='text-[var(--primary)]' />}
                                    </div>)
                                })}
                            </div>
                        </div>
                        {/* Side Bar showing Recipients  - ENDS*/}

                        {/* Drag Drop Tags Start */}
                        <div
                            id='tags-con-dash-left'
                            className='mt-4'>
                            <FieldList color={selectedRecipient?.color || '#2d2d2d'} recipientId={selectedRecipient.id} recipientIndx={selectedRecipientIndx} />
                        </div>

                        {/* Fields List and Recipeint - End */}
                    </>}

                    {isPages && <>
                        {/* Pages - START */}
                        <div className='flex flex-col gap-2'>
                            {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 text-slate-100'>
                                                <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.id + (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.id + "" + 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.id + (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>
                        {/* Pages - END */}
                    </>}
                </div>
            }
            {/* Left Side Bar - END */}

            {/* Small Devices - START  */}


            <div>

                {/* Left Side Pages */}
                {!isPages && <div
                    onClick={() => {
                        handleSetIsPages(true)
                        handleSetIsFields(false)
                    }}
                    className='sm:hidden fixed top-[8%] left-0 bg-[var(--primary)] z-50 flex items-center text-white rounded-tr-md rounded-br-md cursor-pointer opacity-30 hover:opacity-100 transition-all duration-300'>
                    <div className='py-2'>
                        <FaAngleUp className='rotate-90' />
                        <p className='flex flex-col justify-center items-center text-xs tracking-widest mt-1 pt-1 border-t-1 border-white'>
                            <span>P</span>
                            <span>A</span>
                            <span>G</span>
                            <span>E</span>
                            <span>S</span>
                        </p>
                    </div>
                </div>}


                <div
                    className='sm:hidden fixed bottom-0 left-0 rounded-tr-md rounded-tl-md bg-[var(--primary)] z-50 w-full flex justify-center text-white cursor-pointer opacity-30 hover:opacity-100 transition-all duration-300'
                    onClick={() => {
                        handleSetIsPages(false)
                        handleSetIsFields(true)
                    }}
                >
                    <div className='flex'>
                        <FaAngleUp />
                        <p className='flex justify-center items-center text-xs tracking-widest ml-1 pl-1 border-l-1 border-white'>
                            <span>T</span>
                            <span>A</span>
                            <span>G</span>
                            <span>S</span>
                        </p>
                    </div>
                </div>


            </div>


            {/* Small Devices - END  */}



        </>
    )
}

export default LeftSideBar