import React, { useContext } from 'react';
import Header from "../Header";
import ecreIcons from "../../../components/core/icons";
import { SettingsContext } from '../../App/SettingsContext';
import { displayProPopup } from '../../../Helper';
import { translate } from '../../../Helper';

function ShortcodeTab() {
    const {handleCopy, copiedItemIndex, isPro} = useContext(SettingsContext);


    const shortcodes = [
        { title: translate('shortcode_title_referral_card'), description: translate('shortcode_desc_referral_card'), shortcode: "[ecre-referral-card]" },
        { title: translate('shortcode_title_email_invite'), description: translate('shortcode_desc_email_invite'), shortcode: "[ecre-email-invite]" },
        { title: translate('shortcode_title_reward_coupons'), description: translate('shortcode_desc_reward_coupons'), shortcode: "[ecre-reward-coupons-table]" },
        { title: translate('shortcode_title_invitation_tracking'), description: translate('shortcode_desc_invitation_tracking'), shortcode: "[ecre-invitation-tracking-table]" },
        { title: translate('shortcode_title_reward_point'), description: translate('shortcode_desc_reward_point'), shortcode: "[ecre-reward-point-table]", isProFeature: true }
    ];

    return (
        <div className="shortcode-widgets-settings">
            <Header title={translate('header_shortcode_widgets')} subtitle={translate('subtitle_shortcode_widgets')} />

            <div className="shortcode-widgets ecre-gap-6">
                {shortcodes.map((item, index) => (
                    <div key={index} onClick={ item.isProFeature && !isPro ? displayProPopup : undefined } className="shortcode-widgets__item ecre-flex ecre-flex-col ecre-items-start ecre-min-h-[152px] ecre-p-4 ecre-bg-white ecre-rounded">
                        <div className={`${!isPro ? 'ecre-flex ecre-items-baseline' : ''}`}>
                            <h6 className="ecre-text-black ecre-text-sm ecre-font-medium ecre-mb-1.5 ecre-mr-1">{item.title} </h6>
                            {item.isProFeature && !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 '>
                                    <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>
                            )}
                        </div>
                        
                        <p className="ecre-text-gray-500 ecre-text-xs ecre-font-normal ecre-mb-5">{item.description}</p>
                        <button
                            onClick={() => {
                                if (item.isProFeature && !isPro) {
                                  displayProPopup();
                                } else {
                                  handleCopy(item.shortcode, index);
                                }
                              }}
                            className={`ecre-group ecre-w-[170px] ecre-mt-auto ecre-px-4 ecre-py-2.5 ecre-bg-white ecre-rounded-lg ecre-border ecre-border-solid ecre-border-violet-700 ecre-text-violet-700 ecre-text-sm ecre-font-semibold ecre-inline-flex ecre-items-center ecre-justify-center ecre-gap-2 ecre-transition hover:ecre-bg-violet-700 hover:ecre-text-white ${item.isProFeature && !isPro ? 'ecre-opacity-50 ecre-bg-gray-200 ' : ''}`}
                        >
                            <span className="icon ecre-h-[19px] ecre-leading-[1]">
                                {copiedItemIndex === index ? (
                                    <>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="17" viewBox="0 0 18 17" fill="none">
                                        <path className="ecre-transition group-hover:ecre-fill-white" d="M6.5 9.125L8.375 11L11.5 6.625M16.5 8.5C16.5 9.5569 15.9753 10.4913 15.1722 11.0568C15.3401 12.0245 15.0504 13.056 14.3031 13.8033C13.5559 14.5505 12.5243 14.8402 11.5567 14.6724C10.9911 15.4754 10.0568 16 9 16C7.94321 16 7.00894 15.4754 6.44337 14.6725C5.47555 14.8405 4.4438 14.5508 3.69642 13.8034C2.94905 13.0561 2.65937 12.0243 2.82738 11.0565C2.02451 10.4909 1.5 9.55673 1.5 8.5C1.5 7.44323 2.02455 6.50898 2.82748 5.9434C2.65956 4.97566 2.94925 3.94403 3.69656 3.19672C4.44388 2.44941 5.47553 2.15972 6.44328 2.32765C7.00884 1.52463 7.94315 1 9 1C10.0568 1 10.9911 1.52458 11.5566 2.32756C12.5245 2.15954 13.5562 2.44921 14.3036 3.19659C15.0509 3.94395 15.3406 4.97568 15.1726 5.94348C15.9755 6.50906 16.5 7.44327 16.5 8.5Z" stroke="#6A40D5" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                                    </svg>
                                    </>
                                ) : (ecreIcons.copy)}
                            </span>
                            <span>{copiedItemIndex === index ? translate('btn_copied') : translate('btn_copy_shortcode') } </span>
                        </button>
                    </div>
                ))}
            </div>
            <div onClick={ !isPro ? displayProPopup : undefined } className="elementor-gutenberg ecre-max-w-[1080px] ecre-p-4 ecre-bg-white ecre-rounded ecre-mt-7 md:ecre-mt-12">
                <div className="icon-group ecre-flex ecre-flex-wrap ecre-gap-3 ecre-mb-2">
                    <div className="icon">
                       {ecreIcons.elementor}
                    </div>
                    <div className="icon">
                       {ecreIcons.gutenberg}
                    </div>
                </div>
                <div className={`${!isPro ? 'ecre-flex ecre-items-baseline' : ''}`}>
                    <h6 className="ecre-text-black ecre-text-sm ecre-font-medium ecre-mb-1.5">{translate('elementor_gutenberg')}</h6>
                    {!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 '>
                            <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>
                    )}
                 </div>
                <p className="ecre-text-gray-500 ecre-text-xs ecre-font-normal">{translate('elementor_gutenberg_desc')}</p>
            </div>
        </div>
    );
}

export default ShortcodeTab;