import React, { useEffect, useRef } from 'react'
import { IoMdArrowDropdown } from "react-icons/io";
import { IoIosSend } from "react-icons/io";
import { useDispatch, useSelector } from 'react-redux';
import { setSignType } from '../../store/slices/selectedDocsSlice';
import { RootState } from '../../store/store';
import { useNavigate } from 'react-router-dom';
import { Bounce, toast } from 'react-toastify';
// import { IoMdArrowDropright } from "react-icons/io";

interface Props {
    showSideBar: boolean;
}

const SendForSign: React.FC<Props> = ({ showSideBar }) => {
    const navigate = useNavigate();
    const dispatch = useDispatch();
    const [sendForSignDropdown, setSendForSignDropdown] = React.useState(false);
    const dropDownRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        sendForSignDropdown && dropDownRef.current?.focus();
    }, [sendForSignDropdown])

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

    const handleSendSignDispatch: (type: "self-sign" | "multiple-sign") => void = (signType) => {
        if (selectedDocuments === null  || !selectedDocuments.length) {
            if (selectedDocuments === null || !selectedDocuments.length) {
                toast.dismiss();
                toast.error("Select 📄 Documents first!", {
                    position: "bottom-right",
                    autoClose: 5000,
                    hideProgressBar: false,
                    closeOnClick: false,
                    pauseOnHover: true,
                    draggable: true,
                    progress: undefined,
                    theme: "light",
                    transition: Bounce,
                });
                return
            }
        }

        if (selectedDocuments.length) {
            dispatch(setSignType(signType));
        }
    }

    return (
        <div className='relative max-h-max pb-3'
            tabIndex={0}
            ref={dropDownRef}
            onBlur={() => setSendForSignDropdown(false)}
        >
            <div className={`flex justify-between items-center gap-2 cursor-pointer bg-[var(--primary)] rounded text-[var(--sendForSignTextCol)] ${showSideBar ? "" : "pt-[0.4rem] pr-[0.6rem] pb-[0.4rem] pl-[0.2rem]"}`}
                onClick={() => setSendForSignDropdown(!sendForSignDropdown)}>
                <div className={`w-full`}>
                    {
                        showSideBar ?
                            <p className='text-center text-sm'>Send for signature</p>
                            :
                            <IoIosSend className={`pl-2 text-3xl`} />
                    }
                </div>
                {showSideBar && <p className='border-l-1 border-[var(--sendForSignTextCol)] px-2 py-2'>
                    <IoMdArrowDropdown className={`text-2xl ${sendForSignDropdown ? 'rotate-180' : ''} transition-all duration-150`} />
                </p>}
            </div>

            {/* Drop Down Box */}
            {
                sendForSignDropdown &&
                <div className={`w-[300px] rounded absolute z-40 bg-[var(--sendForSignDropDownBg)] shadow-lg top-[54px] text-left outline-none`}>
                    <div className='py-3 px-8 leading-6 rounded-t-sm hover:bg-[var(--sendForSignDropDownHover)] cursor-pointer' onClick={() => handleSendSignDispatch('self-sign')}>
                        <p>Self Sign</p>
                        <p className='text-[var(--greyTextCol)] text-sm'>You're the only signer.</p>
                    </div>
                    <div className='w-full h-[1px] opacity-30 bg-[var(--greyTextCol)]'></div>
                    <div className='py-3 px-8 leading-6 rounded-b-sm hover:bg-[var(--sendForSignDropDownHover)] cursor-pointer' onClick={() => handleSendSignDispatch('multiple-sign')}>
                        <p>Send for Sign</p>
                        <p className='text-[var(--greyTextCol)] text-sm'>You and other need to sign.</p>
                    </div>
                </div>
            }
        </div>
    )
}

export default SendForSign