import React, { useContext } from 'react';
import Tooltip from '../../../components/core/Tooltip';
import Modal from '../../../components/core/Modal';
import { SettingsContext } from '../../App/SettingsContext';
import Header from '../Header';
import Switcher from '../fields/Switcher';
import Input from '../fields/Input';
import ecreIcons from '../../../components/core/icons';
import { displayProPopup } from '../../../Helper';
import { translate } from '../../../Helper';
import Loader from '../../../components/core/Loader';
import DOMPurify from "dompurify";


function EmailTab() {
    const {
        handleToggleRewardModal, isReferralMailModal, handleToggleReferralModal,isRewardMailModal,isReferralMailTagModal,handleToggleReferralTagModal,isRewardMailTagModal, handleToggleRewardTagModal,formData,handleSelectChange,handleInputChange, referralCoupon, referral_discount, reward_discount,isPro,currency,loading,initialFormData
    } = useContext(SettingsContext);

    const sanitizedHTML = DOMPurify.sanitize(
        formData.referralEmailBody.replace(/\n/g, "<br>")
    );

    return (
        <div className="reward-settings">
            <Header title={translate('email_settings')} subtitle={translate('email_settings_subtitle')} />

            {loading ? <Loader /> :
            <>
            <div className="email-referral ecre-mb-12">
                <div className="heading ecre-mb-8">
                    <h6 className="ecre-text-gray-900 ecre-text-base ecre-font-bold ecre-mb-2">{ translate( 'referral_email' ) }</h6>
                    <p className="ecre-text-gray-500 ecre-text-xs ecre-font-normal">{ translate( 'referral_email_info' ) }</p>
                </div>
                <div className="email-referral__enable-field ecre-mb-8">
                    <Switcher
                        id="enable_refferal_email_invitation"
                        checked={formData.enableRefferalEmailInvitation}
                        onChange={handleInputChange('enableRefferalEmailInvitation')}
                        label={ translate( 'enable_email_invitation' ) }
                        tooltip= { translate( 'enable_email_info' ) }
                    />
                    <p className="ecre-text-gray-500 ecre-text-xs ecre-font-normal">{ translate( 'allow_email_referral' ) }</p>
                </div>

               { formData.enableRefferalEmailInvitation && (
                    <div className="email-referral__content">
                        <div className="form-group ecre-mb-8">
                            <Input
                                id="referral_email_subject"
                                label={ translate( 'email_subject' ) }
                                tooltip= { translate( 'email_subject_change' ) }
                                type="text"
                                width="514"
                                value={isPro ? formData.referralEmailSubject : initialFormData.referralEmailSubject }
                                onChange={handleInputChange('referralEmailSubject')}
                                isPro={isPro}
                            />
                        </div>

                        <div className="form-group ecre-mb-8">
                            <Input
                                id="referral_email_heading"
                                label={ translate( 'email_heading' ) }
                                tooltip={ translate( 'email_heading_change' ) }
                                type="text"
                                width="514"
                                value={isPro ? formData.referralEmailHeading : initialFormData.referralEmailHeading }
                                onChange={handleInputChange('referralEmailHeading')}
                                isPro={isPro}
                            />
                        </div>

                        <div className="form-group email-body">
                            <label className="ecre-text-gray-500 ecre-text-sm ecre-font-medium ecre-block ecre-mb-2">
                                <span className={`ecre-mr-2.5 ${ !isPro ? 'ecre-opacity-50' : ''}`}>{ translate( 'email_body' ) }</span>
                                <Tooltip className="ecre-align-[-2px] ecre-mr-1" content={ translate( 'Change_email_body_desc' ) }/>
                                {!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={displayProPopup}>
                                            <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="wrapper ecre-flex ecre-flex-col ecre-max-w-[514px]" onClick={ !isPro ? displayProPopup : undefined }>
                                <div className='ecre-inline-flex ecre-items-center'>
                                    <p className="ecre-text-gray-500 ecre-text-xs ecre-font-normal">{translate('tags_supported')}</p>  
                                    <button  disabled={!isPro} onClick={handleToggleReferralTagModal} className={`ecre-text-violet-700 ecre-text-sm ecre-font-medium ecre-cursor-pointer ecre-border-0 ecre-outline-none ecre-shadow-none ecre-bg-transparent ecre-ml-auto ecre-mt-2 ecre-inline-flex ecre-items-center ecre-gap-1 ${ !isPro ? 'ecre-opacity-50' : ''}`}>
                                            <span>{translate('supported_tags_list')}</span>
                                    </button>

                                </div>

                                <textarea 
                                    cols="30" 
                                    rows="6" 
                                    value={isPro ? formData.referralEmailBody : initialFormData.referralEmailBody }
                                    onChange={handleInputChange('referralEmailBody')}
                                    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] ${ !isPro ? 'ecre-opacity-50 ecre-bg-gray-200 ' : ''}`} 
                                    // disabled={!isPro}
                                />

                                <button  disabled={!isPro} onClick={handleToggleReferralModal} className={`ecre-text-violet-700 ecre-text-sm ecre-font-medium ecre-cursor-pointer ecre-border-0 ecre-outline-none ecre-shadow-none ecre-bg-transparent ecre-ml-auto ecre-mt-2 ecre-inline-flex ecre-items-center ecre-gap-1 ${ !isPro ? 'ecre-opacity-50' : ''}`}>
                                    <span className="icon ecre-leading-[1]">
                                        {ecreIcons.eye}
                                    </span>
                                    <span>{ translate( 'see_preview' ) }</span>
                                </button>
                            </div>
                        </div>
                    </div>
               )} 
                
            </div>

            <div className="email-reward">
                <div className="heading ecre-mb-8">
                    <h6 className="ecre-text-gray-900 ecre-text-base ecre-font-bold ecre-mb-2">{ translate( 'reward_email' ) }</h6>
                    <p className="ecre-text-gray-500 ecre-text-xs ecre-font-normal">{ translate( 'reward_email_info' ) }</p>
                </div>
                <div className="email-reward__enable-field ecre-mb-8">
                     <Switcher
                        id="enable_reward_email_invitation"
                        checked={formData.enableRewardEmailInvitation}
                        onChange={handleInputChange('enableRewardEmailInvitation')}
                        label={translate('enable_email_notification_reward')}
                        tooltip={translate('enable_email_notification_reward_tooltip')}
                    />
                    <p className="ecre-text-gray-500 ecre-text-xs ecre-font-normal">{ translate( 'send_reward_email' ) }</p>
                </div> 

                { formData.enableRewardEmailInvitation && (
                    <div className="email-reward__content">
                        <div className="form-group ecre-mb-8">
                            <Input
                                id="reward_email_subject"
                                label={ translate( 'email_subject' ) }
                                tooltip={ translate( 'email_subject_change' ) }
                                type="text"
                                width="514"
                                value={isPro ? formData.rewardEmailSubject : initialFormData.rewardEmailSubject }
                                onChange={handleInputChange('rewardEmailSubject')}
                                isPro={isPro}
                            />
                        </div>

                        <div className="form-group ecre-mb-8">
                            <Input
                                id="reward_email_heading"
                                label={ translate( 'email_heading' ) }
                                tooltip={ translate( 'email_heading_change' ) }
                                type="text"
                                width="514"
                                value={isPro ? formData.rewardEmailHeading : initialFormData.rewardEmailHeading }
                                onChange={handleInputChange('rewardEmailHeading')}
                                isPro={isPro}
                            />
                        </div>

                        <div className="form-group ecre-mb-8 email-body">
                            <label className="ecre-text-gray-500 ecre-text-sm ecre-font-medium ecre-block ecre-mb-2">
                                <span className={`ecre-mr-2.5 ${ !isPro ? 'ecre-opacity-50' : ''}`}>{ translate( 'email_body' ) }</span>
                                <Tooltip className="ecre-align-[-2px] ecre-mr-1" content={ translate( 'Change_email_body_desc' ) }/>
                                {!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={displayProPopup}>
                                        <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="wrapper ecre-flex ecre-flex-col ecre-max-w-[514px]" onClick={ !isPro ? displayProPopup : undefined }>
                                <div className='ecre-inline-flex ecre-items-center'>
                                    <p className="ecre-text-gray-500 ecre-text-xs ecre-font-normal">{translate('tags_supported')}</p>  
                                    <button  disabled={!isPro} onClick={handleToggleRewardTagModal} className={`ecre-text-violet-700 ecre-text-sm ecre-font-medium ecre-cursor-pointer ecre-border-0 ecre-outline-none ecre-shadow-none ecre-bg-transparent ecre-ml-auto ecre-mt-2 ecre-inline-flex ecre-items-center ecre-gap-1 ${ !isPro ? 'ecre-opacity-50' : ''}`}>
                                            <span>{translate('supported_tags_list')}</span>
                                    </button>

                                </div>

                                <textarea 
                                    cols="30" 
                                    rows="6" 
                                    value={isPro ? formData.rewardEmailBody : initialFormData.rewardEmailBody }
                                    onChange={handleInputChange('rewardEmailBody')}
                                    className={`ecre-text-gray-900 !ecre-shadow-none ecre-text-sm !ecre-font-normal ecre-bg-white ecre-p-[15px] ecre-w-full ecre-max-w-[514px] ecre-rounded-lg ecre-border !ecre-border-[#9CA3AF] ${ !isPro ? 'ecre-opacity-50 ecre-bg-gray-200 ' : ''}`}
                                    // disabled={!isPro}
                                />

                                <button disabled={!isPro} onClick={handleToggleRewardModal} className={`ecre-text-violet-700 ecre-text-sm ecre-font-medium ecre-cursor-pointer ecre-border-0 ecre-outline-none ecre-shadow-none ecre-bg-transparent ecre-ml-auto ecre-mt-2 ecre-inline-flex ecre-items-center ecre-gap-1 ${ !isPro ? 'ecre-opacity-50' : ''}`}>
                                    <span className="icon ecre-leading-[1]">
                                        {ecreIcons.eye}
                                    </span>
                                    <span>{ translate( 'see_preview' ) }</span>
                                </button>
                            </div>
                        </div>
                    </div>
                )}
                

            </div> </> }

            <Modal className='echorewards-eamil-preview' openModal={isReferralMailModal} toggleModal={handleToggleReferralModal}>
                {{
                header: <h4 className="ecre-text-white ecre-text-xl ecre-font-semibold ecre-mb-4">{formData.referralEmailHeading}</h4>,
                body: (
                    <div className="email-body ecre-pt-2">
                        <h6 className="ecre-w-[530px] ecre-text-neutral-500 ecre-text-sm ecre-font-bold ecre-mb-4">{translate('hi')} [name],</h6>
                        <div className="description ecre-text-neutral-500 ecre-text-sm ecre-font-normal *:ecre-mb-7">
                            <div dangerouslySetInnerHTML={{ __html: sanitizedHTML }}></div>
                        </div>
                        <div className="coupon-wrap ecre-px-4 ecre-py-7 ecre-bg-gray-100 ecre-rounded-lg ecre-text-center">
                            <div className="ecre-text-center ecre-text-neutral-500 ecre-text-sm ecre-font-normal">
                                { translate( 'coupon_code' ) }: <strong className="text-zinc-700 ecre-font-bold ">{referralCoupon.coupon_code}</strong>
                            </div>
       
                            { formData.enableReferralLink && (
                                <div className="ecre-text-center ecre-text-neutral-500 ecre-text-sm ecre-font-normal ecre-mt-2">{translate('link')}: {referralCoupon?.coupon_code ? (
                                    <a
                                        href={`${ecreAdmin.site_url}/?ref=${referralCoupon.coupon_code.toLowerCase()}`}
                                        className="ecre-text-violet-700 hover:text-violet-600 hover:underline"
                                    >
                                        {`${ecreAdmin.site_url}/?ref=${referralCoupon.coupon_code.toLowerCase()}`}
                                    </a>
                                ) : ''}
                                </div>

                            )}
                            
                            <div className="ecre-text-neutral-500 ecre-text-sm ecre-font-normal ecre-leading-[21px] ecre-mt-4">{ translate( 'enjoy' ) } <span className="text-orange-400 ecre-font-semibold"> {referral_discount} { translate( 'discount' ) } </span> 
                            
                                {formData.referralCouponType.value === 'sign_up_fee' || formData.referralCouponType.value === 'sign_up_fee_percent'
                                    ? translate('coupon_info_subscriptions')
                                    : formData.referralCouponType.value === 'recurring_fee' || formData.referralCouponType.value === 'recurring_percent'
                                    ? translate('coupon_info_renewals')
                                    : formData.referralCouponType.value === 'percent' || formData.referralCouponType.value === 'fixed'
                                    ? translate('coupon_info')
                                    : ''
                                }
                            
                            </div>
                        </div>
                    </div>
                ),
                footer: (
                    <div className="btn-box ecre-justify-center ecre-items-center ecre-gap-2 ecre-flex">
                        <button onClick={handleToggleReferralModal} className="ecre-text-gray-900 ecre-text-sm ecre-font-semibold ecre-px-4 ecre-py-2.5 ecre-transition ecre-rounded-lg ecre-border ecre-border-solid ecre-border-gray-900 ecre-bg-transparent hover:ecre-border-slate-100 hover:ecre-bg-slate-100">{ translate( 'cancel' ) }</button>
                    </div>
                )
                }}
            </Modal>

            <Modal className='echorewards-eamil-preview' openModal={isRewardMailModal} toggleModal={handleToggleRewardModal}>
            {{
                header: <h4 className="ecre-text-white ecre-text-xl ecre-font-semibold ecre-mb-4">{ translate( 'congratulations' ) }</h4>,
                body: (
                    <div className="email-body ecre-pt-2">
                        <h6 className="ecre-w-[530px] ecre-text-neutral-500 ecre-text-sm ecre-font-bold ecre-mb-4">{translate('hi')} #username,</h6>
                        <div className="description ecre-text-neutral-500 ecre-text-sm ecre-font-normal *:ecre-mb-7">
                            <p>{formData.rewardEmailBody}</p>
                        </div>
                        <div className="reward-detail ecre-text-neutral-500 ecre-text-sm ecre-font-normal ecre-mb-7">{ translate( 'reward_details' ) }:</div>

                    { formData.rewardType.value === 'reward_point' ? (
                        <div className="coupon-wrap ecre-px-4 ecre-py-7 ecre-bg-gray-100 ecre-rounded-lg ecre-text-center">
                            <div className="ecre-text-center ecre-text-neutral-500 ecre-text-sm ecre-font-normal">{ translate( 'reward_point' ) }: <strong className="text-zinc-700 ecre-font-bold ">{formData.redeemPoint}</strong></div>
                            <div className="ecre-text-neutral-500 ecre-text-sm ecre-font-normal ecre-leading-[21px] ecre-mt-4">{ translate( 'get' ) }<span className="text-orange-400 ecre-font-semibold"> { formData.redeemDiscount}{currency} { translate( 'off' ) }</span> { translate( 'for_each' ) } <span className="text-orange-400 ecre-font-semibold">{formData.redeemPoint} { translate( 'reward' ) } </span> { translate( 'points' ) }</div>   
                        </div>
                       ) : (
                        <div className="coupon-wrap ecre-px-4 ecre-py-7 ecre-bg-gray-100 ecre-rounded-lg ecre-text-center">
                            <div className="ecre-text-center ecre-text-neutral-500 ecre-text-sm ecre-font-normal">{ translate( 'coupon_code' ) }: <strong className="text-zinc-700 ecre-font-bold ">OY8J7J6L</strong></div>
                            <div className="ecre-text-neutral-500 ecre-text-sm ecre-font-normal ecre-leading-[21px] ecre-mt-4"> { translate( 'enjoy' ) } <span className="text-orange-400 ecre-font-semibold">{ reward_discount} { translate( 'discount' ) } </span>
                                {formData.rewardType.value === 'sign_up_fee' || formData.rewardType.value === 'sign_up_fee_percent'
                                    ? translate('coupon_info_subscriptions')
                                    : formData.rewardType.value === 'recurring_fee' || formData.rewardType.value === 'recurring_percent'
                                    ? translate('coupon_info_renewals')
                                    : formData.rewardType.value === 'percent' || formData.rewardType.value === 'fixed'
                                    ? translate('coupon_info')
                                    : ''
                                }
                            </div>
                        </div>
                       )}
                    </div>
                ),
                footer: (
                    <div className="btn-box ecre-justify-center ecre-items-center ecre-gap-2 ecre-flex">
                        <button onClick={handleToggleRewardModal} className="ecre-text-gray-900 ecre-text-sm ecre-font-semibold ecre-px-4 ecre-py-2.5 ecre-transition ecre-rounded-lg ecre-border ecre-border-solid ecre-border-gray-900 ecre-bg-transparent hover:ecre-border-slate-100 hover:ecre-bg-slate-100">{ translate( 'cancel' ) }</button>
                    </div>
                )
                }}
            </Modal>

            <Modal className='echorewards-eamil-preview' openModal={isReferralMailTagModal} toggleModal={handleToggleReferralTagModal}>
                {{
                header: <h4 className="ecre-text-white ecre-text-xl ecre-font-semibold ecre-mb-4">{translate('supported_tags_list')}</h4>,
                body: (
                    <div className="email-body ecre-pt-2">
                        <ul className="ecre-list-disc ecre-ml-5 ecre-space-y-2 ecre-text-sm">
                            <li>
                                {translate('referrer_name_tag_desc')}
                            </li>
                            <li>
                                {translate('referral_discount_tag_desc')}
                            </li>
                            <li>
                                {translate('referral_coupon_tag_desc')}
                            </li>
                            <li>
                                {translate('site_name_tag_desc')}
                            </li>
                        </ul>
                    </div>

                ),
                footer: (
                    <div className="btn-box ecre-justify-center ecre-items-center ecre-gap-2 ecre-flex">
                        <button onClick={handleToggleReferralTagModal} className="ecre-text-gray-900 ecre-text-sm ecre-font-semibold ecre-px-4 ecre-py-2.5 ecre-transition ecre-rounded-lg ecre-outline-none ecre-border ecre-border-solid ecre-border-gray-900 ecre-bg-transparent hover:ecre-border-slate-100 hover:ecre-bg-slate-100">{ translate( 'cancel' ) }</button>
                    </div>
                )
                }}
            </Modal>

            <Modal className='echorewards-eamil-preview' openModal={isRewardMailTagModal} toggleModal={handleToggleRewardTagModal}>
                {{
                header: <h4 className="ecre-max-w-[306px] ecre-text-white ecre-text-xl ecre-font-semibold ecre-mb-4">{translate('supported_tags_list')}</h4>,
                body: (
                    <div className="email-body ecre-pt-2">
                        <ul className="ecre-list-disc ecre-ml-5 ecre-space-y-2 ecre-text-sm">
                            <li>
                                {translate('referrer_name_tag_desc')}
                            </li>
                            <li>
                                {translate('reward_discount_tag_desc')}
                            </li>
                            <li>
                                {translate('reward_coupon_tag_desc')}
                            </li>
                            <li>
                                {translate('site_name_tag_desc')}
                            </li>
                        </ul>
                    </div>

                ),
                footer: (
                    <div className="btn-box ecre-justify-center ecre-items-center ecre-gap-2 ecre-flex">
                        <button onClick={handleToggleRewardTagModal} className="ecre-text-gray-900 ecre-text-sm ecre-font-semibold ecre-px-4 ecre-py-2.5 ecre-transition ecre-rounded-lg ecre-border ecre-border-solid ecre-border-gray-900 ecre-bg-transparent hover:ecre-border-slate-100 hover:ecre-bg-slate-100">{ translate( 'cancel' ) }</button>
                    </div>
                )
                }}
            </Modal>
        </div>
    );
}

export default EmailTab;