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

const TextArea = ({ id, label, tooltip, rows = 6, cols, width = 'small', value, onChange, marginTop, isPro = true }) => {
    const [mouseHover, setMouseHover] = useState(false);
      const [isOpen, setIsOpen] = useState(false);

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

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

    const handleToggleModal = () => {
        setIsOpen(!isOpen);
    };

    const resetNote = () => {
        let defaultValue = '';
        if (id === 'referral_signup_coupon_note' || id === 'reward_signup_coupon_note') {
            defaultValue = translate('subscription_singup_fee_notice');
        } else if (id === 'referral_recurring_coupon_note' || id === 'reward_recurring_coupon_note') {
            defaultValue = translate('subscription_renewal_fee_notice');
        }
        onChange({ target: { value: defaultValue } }); // Update the value
        setIsOpen(false); // Close the modal
    };

    return (
        <>
            <div className={`text-area-wrapper ${marginTop ? marginTop : ''} ${mouseHover ? "pro-lock-hover" : ""}`}>
                <label onClick={!isPro ? displayProPopup : undefined} htmlFor={id} className="ecre-text-gray-500 ecre-text-sm ecre-font-medium ecre-inline-block ecre-pb-2">
                    <span className={`ecre-mr-2.5 ecre-text-gray-900 ${!isPro ? 'ecre-opacity-50' : ''}`}>{label}</span>
                    {tooltip && <Tooltip className="ecre-align-[-2px] ecre-mr-1" content={tooltip} />}
                    {!isPro && (
                        <button className='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 ' onClick={!isPro ? displayProPopup : undefined}>
                            <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>
                        </button>
                    )}
                </label>

                <div className="input-wrapper__inner">
                    <div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} className={`textarea-wrap ${'small' == width ? 'ecre-max-w-[430px]' : 'ecre-max-w-[514px]'}`} onClick={!isPro ? displayProPopup : undefined}>
                        <textarea
                            id={id}
                            rows={rows}
                            cols={cols}
                            value={value}
                            onChange={onChange}
                            className={`ecre-text-gray-900 !ecre-shadow-none ecre-text-sm !ecre-font-normal ecre-bg-white ecre-p-[15px] ecre-w-full ecre-rounded-lg ecre-border !ecre-border-[#9CA3AF]  ${'small' == width ? 'ecre-max-w-[430px]' : 'ecre-max-w-[514px]'}  ${!isPro ? 'ecre-opacity-50 ecre-bg-gray-200 ' : ''}`}
                        />

                        {
                            ('referral_signup_coupon_note' === id ||
                                'referral_recurring_coupon_note' === id ||
                                'reward_signup_coupon_note' === id ||
                                'reward_recurring_coupon_note' === id) && (
                                <span
                                    className="ecre-text-red-500 ecre-text-xs ecre-m-0 ecre-p-0 ecre-mt-2 !ecre-bg-transparent !ecre-border-0 !ecre-cursor-pointer !ecre-outline-0 !ecre-shadow-none ecre-text-right ecre-block"
                                    onClick={handleToggleModal}
                                >
                                    {translate('reset')}
                                </span>
                            )
                        }


                    </div>
                </div>

            </div>
             <Modal openModal={isOpen} toggleModal={handleToggleModal}>
                {{
                    header: <h6 className="title ecre-text-gray-900 ecre-text-base ecre-font-semibold">{translate('want_to_reset_note')}</h6>,
                    body: <p className="ecre-text-gray-900 ecre-text-sm">{translate('note_reset_desc')}</p>,
                    footer: (
                        <div className="btn-box ecre-justify-end ecre-flex ecre-gap-2">
                            <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={resetNote}
                                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('confirm')}
                            </button>
                        </div>
                    ),
                }}
            </Modal>
        </>
    )
};

export default TextArea;