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, SignType } from '../../store/slices/selectedDocsSlice';
import { RootState } from '../../store/store';
import { useNavigate } from 'react-router-dom';
import { Bounce, toast } from 'react-toastify';
import api from '../../config/api';
import { StartCard } from '../home/StartSection';
import { setTransactionId, TRANSACTION_STATUS_ENUMS, updateTransactionStatus } from '../../store/slices/transactionSlice';
import { SignTypeEnum } from '../../utlity/types';
// 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 user = useSelector((state: RootState) => state.user);
    if (!user.account || user.account === null) {
        window.location.href = "/login";
        return;
    }

    const defaultAccountId = user.account.id;

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

    const handleStartSectionClick = (signType: SignTypeEnum) => {

        api.post(`/api/accounts/${defaultAccountId}/transactions`)
            .then(res => {
                if (res.status === 200 || res.status === 201) {
                    dispatch(updateTransactionStatus(TRANSACTION_STATUS_ENUMS.TRANSACTION_INITIATED));
                    dispatch(setTransactionId(res.data));
                    let navigateUrl = `/process-step-one/${defaultAccountId}/${res.data}`;
                    if (signType === SignTypeEnum.selfSign) navigateUrl = `/process-step-one/${defaultAccountId}/${res.data}/self_sign`;
                        setTimeout(() => navigate(navigateUrl), 0)
                }
            })
            .catch(err => console.log(err))
    }

    // 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={() => handleStartSectionClick(SignTypeEnum.selfSign)}>
                        <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={() => handleStartSectionClick(SignTypeEnum.multipleSign)}>
                        <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