import React, { useState, useContext } from "react";
import Modal from '../../components/core/Modal';
import ecreIcons from "../../components/core/icons";
import { FrontendContext } from "./FrontendContext";
import Loader from "../../components/core/Loader";
import { translate } from "../../Helper";

function SingleProductApp() {

    const { isPro, loading, settings, referralCoupon, handleCopy, copiedItemIndex, handleToggleReferralShareModal, isReferralShareModal, socialMediaComponents, socialMediaComponentsForRefLink , referralDiscountType, rewardlDiscountType, filteredSocialMediaOptions} = useContext(FrontendContext);

    const [shareType, setShareType] = useState(null);

    const toggleReferralShareModal = (type) => {
        setShareType(type);
        handleToggleReferralShareModal();
    };

    if ( (!referralCoupon || Object.keys(referralCoupon ).length === 0) || (!settings || Object.keys(settings).length === 0)) {
        return <Loader />;
    }

    const selectedSocialMediaComponents = shareType === 'refLink'
    ? socialMediaComponentsForRefLink
    : socialMediaComponents;


    return (

        loading ? (<Loader />) : (
            <>
                <div className="echo-rewards-product !ecre-text-left sm:ecre-max-w-[540px]">
                    {ecreFrontend.is_user_logged_in ? (
                        (settings.canRefferOthers && ecreFrontend.has_orders) || !settings.canRefferOthers ? (
                            <>
                                <div className="content mb-6">
                                    <h3 className="ecre-text-neutral-950 ecre-text-[35px] !ecre-mt-0 ecre-font-medium ecre-mb-2"> { translate('refer_and_win_exciting_rewards')} </h3>
                                    <ol className="!ecre-pl-0 sm:!ecre-pl-5 sm:ecre-list-[number] *:ecre-mb-1.5 !ecre-mt-0">
                                        <li className="ecre-text-zinc-500 ecre-text-sm ecre-font-normal">{ translate('copy_coupon_code')}</li>
                                        <li className="ecre-text-zinc-500 ecre-text-sm ecre-font-normal">{ translate('discount_received')}</li>
                                        <li className="ecre-text-zinc-500 ecre-text-sm ecre-font-normal"> { translate('you_will_get_discount')}</li>
                                    </ol>
                                </div>

                                <div className="reward-coupon ecre-text-left">
                                    <h6 className="ecre-text-[#696A78] ecre-text-sm ecre-font-medium ecre-mb-2">{ translate('use_referral_code')}</h6>
                                    <div className="ecre-text-zinc-700 ecre-text-lg md md:ecre-text-xl ecre-font-bold md:ecre-leading-[30px] ecre-mb-2">{referralCoupon.coupon_code}</div>

                                    {referralCoupon.discount_type === 'sign_up_fee' || referralCoupon.discount_type === 'sign_up_fee_percent' ? (
                                        <div class="ecre-text-neutral-500 ecre-text-xs ecre-font-normal ecre-leading-[18px] ecre-mb-4">
                                            {settings.referralSignupCouponNote}
                                        </div>
                                    ) : referralCoupon.discount_type === 'recurring_fee' || referralCoupon.discount_type === 'recurring_percent'
                                        ? (
                                            <div class="ecre-text-neutral-500 ecre-text-xs ecre-font-normal ecre-leading-[18px] ecre-mb-4">
                                                {settings.referralRecurringCouponNote}
                                            </div>
                                        ) : ''
                                    }

                                    {isPro && settings.enableReferralLimit && (
                                        <div
                                            className={`ecre-text-xs ecre-font-medium ecre-mb-2 ${referralCoupon.is_monthly_limit_reached ? 'ecre-text-red-500' : 'ecre-text-[#219653]'
                                                }`}
                                        >
                                            {referralCoupon.is_monthly_limit_reached
                                                ? translate('you_have_reached_referral_limit')
                                                : `${translate('you_have')} ${referralCoupon.current_referral_limit} ${translate('referrals_remaining')}`}
                                        </div>
                                    )}

                                    <div className="btn-box ecre-flex ecre-items-center ecre-gap-2.5 ecre-mb-4">
                                        <button className={`ecre-w-20 ecre-group ecre-px-2 ecre-py-[5px] ecre-bg-violet-600 ecre-rounded-[5px] ecre-cursor-pointer ecre-border-0 ecre-text-white ecre-text-[10px] ecre-font-normal ecre-inline-flex ecre-items-center ecre-justify-center ecre-gap-1 ecre-transition hover:ecre-bg-violet-500 focus:ecre-bg-violet-500 ${isPro && settings.enableReferralLimit && referralCoupon.is_monthly_limit_reached ? 'ecre-opacity-50 ecre-cursor-not-allowed' : ''}`}
                                            disabled={isPro && settings.enableReferralLimit && referralCoupon.is_monthly_limit_reached}
                                            onClick={() => handleCopy(referralCoupon.coupon_code, 0)}>
                                            <span className="icon">
                                                {ecreIcons.copy_coupon}
                                            </span>
                                            <span>{copiedItemIndex === 0 ? translate('btn_copied') : translate('copy')}</span>
                                        </button>

                                        {settings.enableReferralSocialSharing && (
                                            <button onClick={() => toggleReferralShareModal('general')} className={`ecre-w-20 ecre-group ecre-px-2 ecre-py-[5px] ecre-bg-[#E7DDF4] ecre-rounded-[5px] ecre-cursor-pointer ecre-border-0 ecre-text-[#452D7E] ecre-text-[10px] ecre-font-normal ecre-inline-flex ecre-items-center ecre-justify-center ecre-gap-1 ecre-transition hover:ecre-bg-[#452D7E] hover:ecre-text-white focus:ecre-bg-[#452D7E] focus:ecre-text-white ${isPro && settings.enableReferralLimit && referralCoupon.is_monthly_limit_reached ? 'ecre-opacity-50 ecre-cursor-not-allowed' : ''}`}
                                                disabled={isPro && settings.enableReferralLimit && referralCoupon.is_monthly_limit_reached}>
                                                <span className="icon">
                                                    {ecreIcons.sendEmail}
                                                </span>
                                                <span>{ translate('share')}</span>
                                            </button>)
                                        }
                                    </div>

                                    { settings.enableReferralLink && (
                                        <>
                                            <div className="ecre-text-zinc-500 ecre-text-[13px] ecre-font-medium ecre-mb-2">{translate('or_use_referral_link')}</div>
                                            <div className="share-link ecre-mb-4 ecre-flex">
                                                <div className="ecre-relative">
                                                    <input type="text" defaultValue={`${ecreFrontend.site_url}/?ref=${referralCoupon.coupon_code.toLowerCase()} `} disabled className={`!ecre-text-[#452D7E] !ecre-h-auto placeholder:!ecre-text-[#452D7E] !ecre-box-border ecre-min-w-[230px] sm:ecre-min-w-[276px] !ecre-shadow-none !ecre-text-xs !ecre-font-normal ecre-bg-white !ecre-p-2.5 !ecre-pr-[66px] ecre-w-full !ecre-rounded-lg !ecre-border !ecre-border-solid !ecre-border-[#E7DDF4] focus:!ecre-border-solid ${isPro && settings.enableReferralLimit && referralCoupon.is_monthly_limit_reached ? 'ecre-opacity-50 ecre-cursor-not-allowed' : ''}`} />
                                                    <div className="ecre-btn-box ecre-flex ecre-justify-center ecre-items-center ecre-gap-1.5 ecre-absolute ecre-top-[7px] ecre-right-2">
                                                        <button className={`ecre-group ecre-p-1.5 ecre-bg-violet-600 ecre-cursor-pointer ecre-border-0 ecre-rounded-[5px] ecre-text-white ecre-text-[10px] ecre-font-normal ecre-inline-flex ecre-items-center ecre-justify-center ecre-gap-1 ecre-transition hover:ecre-bg-violet-500 focus:ecre-bg-violet-500 ${isPro && settings.enableReferralLimit && referralCoupon.is_monthly_limit_reached ? 'ecre-opacity-50 ecre-cursor-not-allowed' : ''}`}  onClick={() => handleCopy(`${ecreFrontend.site_url}/?ref=${referralCoupon.coupon_code.toLowerCase()}`, 1)}
                                                        disabled={isPro && settings.enableReferralLimit && referralCoupon.is_monthly_limit_reached}
                                                        >
                                                            <span className="icon">
                                                                {copiedItemIndex === 1 ? (ecreIcons.copiedChecked) : (ecreIcons.copy_coupon)}
                                                            </span>
                                                        </button>

                                                        {settings.enableReferralSocialSharing && (
                                                            <button className={`ecre-group ecre-p-1.5 ecre-bg-[#E7DDF4] ecre-cursor-pointer ecre-border-0 ecre-rounded-[5px] ecre-text-[#452D7E] ecre-text-[10px] ecre-font-normal ecre-inline-flex ecre-items-center ecre-justify-center ecre-gap-1 ecre-transition hover:ecre-bg-[#452D7E] hover:ecre-text-white focus:ecre-bg-[#452D7E] focus:ecre-text-white ${isPro && settings.enableReferralLimit && referralCoupon.is_monthly_limit_reached ? 'ecre-opacity-50 ecre-cursor-not-allowed' : ''}`}  onClick={() => toggleReferralShareModal('refLink')} disabled={isPro && settings.enableReferralLimit && referralCoupon.is_monthly_limit_reached}>
                                                                <span className="icon">
                                                                    {ecreIcons.sendEmail}
                                                                </span>
                                                            </button>
                                                        )}
                                                    </div>
                                                </div>
                                            </div>
                                        </>
                                    )}

                                    <div className="ecre-text-neutral-500 ecre-text-xs ecre-font-normal ecre-leading-[18px]">{translate('get_discount')}<strong className="ecre-text-[#5257C4] ecre-font-semibold"> {referralCoupon.referral_discount} {translate('discount')}</strong> {rewardlDiscountType == 'reward_point' ? translate('with_this_coupon_you_will_get_point') : translate('with_this_coupon_you_will_get')} <strong className="ecre-text-[#D857ED] ecre-font-semibold "> {rewardlDiscountType == 'reward_point' ? settings.rewardPoint : referralCoupon.reward_discount}  {rewardlDiscountType == 'reward_point' ? translate('points') : translate('discount')} </strong>{translate('each_time_someone_uses_your_coupon')}</div>
                                </div>
                            </>
                        ) : (
                            <div className="ecre-mt-6">
                                <h3 className="ecre-text-neutral-950 ecre-text-[35px] !ecre-mt-0 ecre-font-medium ecre-mb-2">{ translate('refer_and_win_exciting_rewards')}</h3>
                                <ol className="!ecre-pl-0 sm:!ecre-pl-5 sm:ecre-list-[number] *:ecre-mb-1.5 !ecre-mt-0">
                                    <li className="ecre-text-zinc-500 ecre-text-sm ecre-font-normal">{ translate('copy_coupon_code')}</li>
                                    <li className="ecre-text-zinc-500 ecre-text-sm ecre-font-normal">{ translate('discount_received')}</li>
                                    <li className="ecre-text-zinc-500 ecre-text-sm ecre-font-normal">{ translate('you_will_get_discount')}</li>
                                </ol>
                                <div className="icon ecre-mb-4">
                                    {ecreIcons.noOrder}
                                </div>
                                <div className="ecre-text-[#5e656a] ecre-text-xs ecre-font-normal ecre-leading-[18px]"> <p>{settings.noOrderMessageToReferrer}</p></div>
                            </div>
                        )
                    ) : (
                        <div>
                            <h3 className="ecre-text-neutral-950 ecre-text-[35px] !ecre-mt-0 ecre-font-medium ecre-mb-2">{ translate('refer_win_rewards')}</h3>
                            <p className="ecre-text-[#686977] ecre-mb-5 ecre-text-xs ecre-font-normal">{ translate('create_account_for_referral')}</p>
                            <button className="ecre-px-2.5 ecre-inline-flex ecre-items-center !ecre-shadow-none ecre-py-2.5 !ecre-bg-[#6d3ae6] ecre-cursor-pointer ecre-border-0 ecre-rounded-[5px] ecre-text-white ecre-text-[10px] ecre-font-normal ecre-transition hover:!ecre-bg-violet-800"
                            onClick={() => {
                                const siteUrl = ecreFrontend.site_url;
                                window.location.href = `${siteUrl}/my-account/`;
                            }}
                            >
                                <span className="icon ecre-mr-1">
                                    {ecreIcons.loginGift}
                                </span>
                                { translate('get_rewards_now')}
                            </button>
                        </div>
                    )}

                </div>

                {settings.socialMediaOptions ?
                    (<Modal className='social-share' openModal={isReferralShareModal} toggleModal={handleToggleReferralShareModal}>
                        {{
                            header: <div className="ecre-text-gray-700 ecre-text-xl ecre-font-semibold">{ translate('share_on_social')}</div>,
                            body: (
                                <ul className="social-list ecre-flex ecre-flex-wrap ecre-gap-6 ecre-list-none !ecre-px-0 !ecre-pt-5 !ecre-m-0 ecre-border-0 ecre-border-t ecre-border-solid ecre-border-[#f5f1fd]">
                                    {filteredSocialMediaOptions.map(option => {
                                        const socialMedia = selectedSocialMediaComponents[option.value];
                                        if (!socialMedia) return null;

                                        const IconComponent = socialMedia.icon;
                                        const url = socialMedia.url;

                                        return (
                                            <li key={option.value}>
                                                <a href={url} target="__blank" className="!ecre-no-underline ecre-cursor-pointer ecre-flex-col ecre-justify-center ecre-items-center ecre-gap-2 ecre-inline-flex ecre-group">
                                                    <div className="icon-wrapper ecre-h-[60px] ecre-w-[60px] ecre-p-2 ecre-bg-white ecre-rounded-lg ecre-border ecre-border-solid ecre-border-gray-200 ecre-flex ecre-justify-center ecre-items-center ecre-transition group-hover:ecre-border-[#d0c2f5]">
                                                        <IconComponent />
                                                    </div>
                                                    <div className="ecre-text-center ecre-text-gray-400 ecre-text-sm ecre-font-normal ecre-transition group-hover:ecre-text-[#6a40d5]">
                                                        {socialMedia.label}
                                                    </div>
                                                </a>
                                            </li>
                                        );
                                    })}
                                </ul>
                            )
                        }}
                    </Modal>) : ''
                }
            </>
        )
    );
}

export default SingleProductApp;