SME-Web/src/components/process/processStepTwo/LeftSideBar.tsx

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

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

import { IoCheckmark } from 'react-icons/io5'
import { MdKeyboardArrowDown } from 'react-icons/md'
import { useParams } from 'react-router-dom';
import { fetchDocuments } from '../../../store/slices/documentSlice';

interface LeftSideBarProps {
    isFields: boolean;
    selectedRecipientIndx: number;
    setSelectedRecipient: React.Dispatch<React.SetStateAction<number>>
}

const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, selectedRecipientIndx, setSelectedRecipient }) => {
    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)

    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())
        }
    }, [])

    return (
        <>
            {/* Left Side Bar - START */}
            {
                selectedRecipients.length > 0 && <div className='col-span-2 bg-white h-full p-4 overflow-y-auto'>
                    {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) => {
                                    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 */}
                    </>}



                    {!isFields && <>
                        {/* 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={document.pages[0].src}
                                                    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-1 flex-wrap'>
                                                {document.pages != undefined && document.pages.map((img, indx) => (
                                                    <a
                                                        href={"#" + document.id + 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>
                        {/* Pages - END */}
                    </>}











                </div >
            }

            {/* Left Side Bar - END */}
        </>
    )
}

export default LeftSideBar