import React, { useState } from 'react';
import ecreIcons from '../../../components/core/icons';
import Modal from '../../../components/core/Modal';
import { displayProPopup, translate } from '../../../Helper';

const FilterDropdown = ({
    isOpen,
    onToggle,
    tempFilters,
    onTempFilterChange,
    onApplyFilters,
    onResetFilters,
    isPro = true
}) => {

    const [isOpenModal, setIsOpenModal] = useState(false);
    const [mouseHover, setMouseHover] = useState(false);

    const handleMouseEnter = () => {
        setMouseHover(true);
    };

    const handleMouseLeave = () => {
        setMouseHover(false);
    };

    const handleToggleModal = () => {
        setIsOpenModal(!isOpenModal);
    };

    return (
        <div className="ecre-relative">
            <button
                onClick={!isPro ? displayProPopup : onToggle}
                onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}
                className={`ecre-flex ecre-items-center ecre-gap-2 ecre-px-4 ecre-cursor-pointer ${mouseHover ? 'pro-lock-hover' : ''} ${!isPro ? 'ecre-pl-4 ecre-pr-12' : 'ecre-px-1.5'} ecre-py-2 ecre-border !ecre-border-gray-200 ecre-rounded ecre-text-sm focus:ecre-outline-none ecre-bg-white`}
            >
                <span className={`beforew-icon ecre-leading-[1] ${!isPro ? 'ecre-opacity-40' : ''}`}>{ecreIcons.filters}</span>
                <span className={!isPro ? 'ecre-opacity-40' : ''}>{translate('filter_reset')}</span>
                {!isPro ? (
                    <div className='ecre-absolute ecre-right-3 ecre-px-1.5 btn-prolock ecre-border-0 ecre-inline-flex ecre-items-center ecre-pt-[3px] ecre-pb-[4px] ecre-bg-[#fee8fd] ecre-rounded-[26px] ecre-text-[#4d1c4b] ecre-text-sm ecre-font-normal'>
                        <span className="icon-wrap">
                            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="11" viewBox="0 0 13 11" fill="none">
                                <path d="M0.806113 7.65309C0.542977 5.94268 0.279841 4.23232 0.0167049 2.52191C-0.0416496 2.14276 0.389758 1.88417 0.696628 2.11434C1.51645 2.7292 2.33622 3.34402 3.15604 3.95889C3.42597 4.16133 3.81053 4.09545 3.99766 3.81471L6.04517 0.743421C6.26154 0.41886 6.73842 0.41886 6.95479 0.743421L9.0023 3.81471C9.18944 4.09545 9.574 4.16129 9.84392 3.95889C10.6637 3.34402 11.4835 2.7292 12.3033 2.11434C12.6102 1.88417 13.0416 2.14276 12.9833 2.52191C12.7202 4.23232 12.457 5.94268 12.1939 7.65309H0.806113Z" fill="#F748F0" />
                                <path d="M11.6001 10.5H1.39974C1.07185 10.5 0.80603 10.2342 0.80603 9.90627V8.60205H12.1938V9.90627C12.1938 10.2342 11.9279 10.5 11.6001 10.5Z" fill="#F748F0" />
                            </svg>
                        </span>
                        <span className="text">{translate('upgrade')}</span>
                    </div>
                ) : (
                    <span className="after-icon">{ecreIcons.angleDown}</span>
                )}
            </button>

            {isOpen && (
                <>
                    <div className="ecre-fixed ecre-left-0 ecre-top-0 ecre-z-40 ecre-w-full ecre-h-full" onClick={onToggle}></div>

                    <div className="ecre-absolute ecre-z-50 ecre-right-0 ecre-mt-2 ecre-w-[171px] ecre-bg-white ecre-rounded shadow-[0px_2px_4px_-1px_rgba(0,0,0,0.06)] shadow-md ecre-border ecre-border-gray-200 ecre-z-10">
                        <div className="ecre-p-4">
                            <div className="ecre-text-sm ecre-font-medium ecre-text-gray-900 ecre-mb-3">{translate('customers_with')}</div>
                            <div className="ecre-mb-4">
                                <label htmlFor="customRewards" className="ecre-cursor-pointer ecre-text-gray-900 ecre-text-sm ecre-font-medium ecre-w-full ecre-flex ecre-items-center ecre-gap-2 ecre-mb-4">
                                    <input
                                        type="checkbox"
                                        id="customRewards"
                                        name="customRewards"
                                        className="!ecre-hidden ecre-peer"
                                        checked={tempFilters.customRewards}
                                        onChange={(e) => onTempFilterChange('customRewards', e.target.checked)}
                                    />
                                    <div className="ecre-w-5 ecre-h-5 ecre-inline-flex ecre-items-center ecre-justify-center ecre-rounded-md ecre-border ecre-border-gray-400 ecre-bg-white ecre-transition-all peer-[:checked]:ecre-bg-[#6a40d5] peer-[:checked]:ecre-border-[#6a40d5]">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="10" viewBox="0 0 12 10" fill="none">
                                            <path fillRule="evenodd" clipRule="evenodd" d="M11.061 0.422259C11.5182 0.732171 11.6375 1.35399 11.3276 1.81112L6.24303 9.31112C6.07698 9.55605 5.81098 9.71487 5.51659 9.74484C5.2222 9.7748 4.92965 9.67285 4.71765 9.4664L0.802215 5.6535C0.406544 5.26819 0.398144 4.63508 0.783453 4.23941C1.16876 3.84374 1.80187 3.83534 2.19754 4.22065L5.25759 7.20056L9.67216 0.688833C9.98207 0.231697 10.6039 0.112348 11.061 0.422259Z" fill="white"></path>
                                        </svg>
                                    </div>
                                    <span>{translate('custom_rewards')}</span>
                                </label>
                                <label htmlFor="customReferrals" className="ecre-cursor-pointer ecre-text-gray-900 ecre-text-sm ecre-font-medium ecre-w-full ecre-flex ecre-items-center ecre-gap-2">
                                    <input
                                        type="checkbox"
                                        id="customReferrals"
                                        name="customReferrals"
                                        className="!ecre-hidden ecre-peer"
                                        checked={tempFilters.customReferrals}
                                        onChange={(e) => onTempFilterChange('customReferrals', e.target.checked)}
                                    />
                                    <div className="ecre-w-5 ecre-h-5 ecre-inline-flex ecre-items-center ecre-justify-center ecre-rounded-md ecre-border ecre-border-gray-400 ecre-bg-white ecre-transition-all peer-[:checked]:ecre-bg-[#6a40d5] peer-[:checked]:ecre-border-[#6a40d5]">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="10" viewBox="0 0 12 10" fill="none">
                                            <path fillRule="evenodd" clipRule="evenodd" d="M11.061 0.422259C11.5182 0.732171 11.6375 1.35399 11.3276 1.81112L6.24303 9.31112C6.07698 9.55605 5.81098 9.71487 5.51659 9.74484C5.2222 9.7748 4.92965 9.67285 4.71765 9.4664L0.802215 5.6535C0.406544 5.26819 0.398144 4.63508 0.783453 4.23941C1.16876 3.84374 1.80187 3.83534 2.19754 4.22065L5.25759 7.20056L9.67216 0.688833C9.98207 0.231697 10.6039 0.112348 11.061 0.422259Z" fill="white"></path>
                                        </svg>
                                    </div>
                                    <span >{translate('custom_referrals')}</span>
                                </label>
                            </div>
                            <div className="ecre-text-sm ecre-font-medium ecre-text-gray-900 ecre-mb-3">{translate('actions')}</div>
                            <div className="ecre-flex ecre-flex-col ecre-gap-2 ecre-mt-4">
                                <button
                                    onClick={onApplyFilters}
                                    className="ecre-cursor-pointer ecre-px-3 ecre-py-2 ecre-bg-white ecre-text-[#6a40d5] ecre-border ecre-border-[#6a40d5] ecre-text-sm ecre-rounded-lg hover:ecre-bg-[#6a40d5] hover:ecre-text-white focus:ecre-outline-none"
                                >
                                    Apply Filter
                                </button>
                                {/* <button
                                    onClick={handleToggleModal}
                                    className="ecre-cursor-pointer ecre-px-3 py-2 ecre-border ecre-bg-white ecre-border-red-300 ecre-text-red-600 ecre-text-sm ecre-rounded-lg hover:ecre-bg-red-50 focus:outline-none"
                                >
                                    Reset Changes
                                </button> */}
                            </div>
                        </div>
                    </div>

                    <Modal openModal={isOpenModal} toggleModal={handleToggleModal}>
                        {{
                            header: <div className="title ecre-text-gray-900 ecre-text-base ecre-font-semibold">{translate('reset_custom_confirm_title')}</div>,
                            body: (
                                <div className="description">
                                    <div className="ecre-text-gray-900 ecre-text-sm ecre-font-normal ecre-mb-4">{translate('reset_custom_confirm_desc')}</div>
                                    <div className="ecre-text-gray-900 ecre-text-sm ecre-font-normal">{translate('are_you_sure_proceed')}</div>
                                </div>
                            ),
                            footer: (
                                <div className="btn-box ecre-justify-end ecre-items-center ecre-gap-2 ecre-flex">
                                    <button onClick={handleToggleModal} className="ecre-text-gray-900 ecre-cursor-pointer ecre-text-sm ecre-font-semibold ecre-px-4 ecre-py-2.5 ecre-transition ecre-bg-slate-100 ecre-rounded-lg ecre-border ecre-border-solid ecre-border-slate-100 hover:ecre-border-red-500 hover:ecre-bg-white hover:ecre-text-red-500">{translate('cancel')}</button>
                                    <button onClick={() => { onResetFilters(); handleToggleModal(); }} className="ecre-text-white ecre-cursor-pointer ecre-text-sm ecre-font-semibold ecre-px-4 ecre-py-2.5 ecre-transition ecre-border ecre-border-solid ecre-border-red-500 ecre-bg-red-500 ecre-rounded-lg hover:ecre-bg-white hover:ecre-text-red-500">{translate('reset')}</button>
                                </div>
                            )
                        }}
                    </Modal>
                </>
            )}
        </div>
    );
};

export default FilterDropdown;