import React, { useEffect, useState } from 'react';
import Modal from '../Modal/Modal';
import { getNonce, isPro } from '../../Helpers';
import wpxpertise from '../../../assets/icons/support/logo.png'
import "./price.scss";
const Pricing = () => {

    const proData = isPro();
    const allConditionsMet = proData;
    const [modalOpen, setModalOpen] = useState(false);
    const [selectedLicense, setSelectedLicense] = useState('1');

    const handlePurchase = () => {
        const handler = FS.Checkout.configure({
            plugin_id: '14342',
            plan_id: '23982',
            public_key: 'pk_bc3d08a262990e44dee3cb5bb42a8',
            image: wpxpertise
        });

        handler.open({
            name: 'Notifier To Slack',
            licenses: selectedLicense,
            purchaseCompleted: function (response) {
                // The logic here will be executed immediately after the purchase confirmation.
                // alert(response.user.email);
            },
            success: function (response) {
                // The logic here will be executed after the customer closes the checkout, after a successful purchase.
                // alert(response.user.email);
            }
        });
    }
    const handlePluginvisit = () => {
        window.open('https://wordpress.org/support/plugin/notifier-to-slack/', '_blank');
    }

    const getPro = async (e) => {
        window.open('https://functiondeck.com/support/', '_blank');
    }

    return (
        <div className="pricing-feature-list">
            <h1>Choose the plan that fits for your team</h1>
            <p>
                14-day money back guarantee
            </p>

            <div className="pricing">
                <div className="plan">
                    <h2>Free</h2>
                    <div className="price">$0.00</div>
                    <ul className="features">
                        <li><i className="fas fa-check-circle"></i>☑️ Dynamic Dashboard</li>
                        <li><i className="fas fa-check-circle"></i>☑️ Advance Activity log with filter</li>
                        <li><i className="fas fa-check-circle"></i> ☑️ Bot Traffic Detection (Rate-Limiting)</li>
                        <li><i className="fas fa-check-circle"></i> ☑️ Monitoring Suspicious HTTP Requests</li>
                        <li><i className="fas fa-check-circle"></i> ☑️ Hide WP version</li>
                        <li><i className="fas fa-check-circle"></i> ☑️ Remove X-Powered-By</li>
                        <li><i className="fas fa-check-circle"></i> ☑️ Advance System Info Panel</li>
                        <li><i className="fas fa-check-circle"></i> ☑️ Disable Themes & Plugins Editor page</li>
                        <li><i className="fas fa-check-circle"></i> ☑️ Track Excessive 404 Errors</li>
                        <li><i className="fas fa-check-circle"></i> ☑️ Navigation menu create, update and delete event</li>
                        <li><i className="fas fa-check-circle"></i>☑️ Easy maintenance mode panel</li>
                        <li><i className="fas fa-check-circle"></i>☑️ Active Mail notification</li>
                        <li><i className="fas fa-check-circle"></i>☑️ Enable plugin review status</li>
                        <li><i className="fas fa-check-circle"></i>☑️ Enable weekly plugin overview</li>
                        <li><i className="fas fa-check-circle"></i>☑️ Site comment actions notification</li>
                        <li><i className="fas fa-check-circle"></i>☑️ Site comment received/moderation notifications</li>
                        <li><i className="fas fa-check-circle"></i>☑️ Disable comment form for visitors [frontend]</li>
                        <li><i className="fas fa-check-circle"></i>☑️ Disable comment thoughts</li>
                        <li><i className="fas fa-check-circle"></i>☑️ Website Cron & Downtime alerts</li>
                        <li><i className="fas fa-check-circle"></i>☑️ Active scheduling cron alert</li>
                        <li><i className="fas fa-check-circle"></i>☑️ Get information about downloading plugins</li>
                        <li><i className="fas fa-check-circle"></i>☑️ Login attempt graph</li>
                        <li><i className="fas fa-check-circle"></i>☑️ plugin activaited/deactivated notification</li>
                        <li><i className="fas fa-times-circle"></i>☑️ Con job API integration</li>
                        <li><i className="fas fa-times-circle"></i>☑️ Login/Logout alert</li>
                        <li><i className="fas fa-check-circle"></i> ☑️ Advance Theme settings panel</li>
                        <li><i className="fas fa-check-circle"></i> ☑️ Media Library attachment add and delete alert</li>
                        <li><i className="fas fa-times-circle"></i>☑️ New User Registration alert </li>
                        <li><i className="fas fa-times-circle"></i>☑️ Product stock, out of stock Notification</li>
                        <li><i className="fas fa-times-circle"></i>☑️ Comment Moderation notifications</li>
                        <li><i className="fas fa-times-circle"></i>☑️ Plugin Unresolved Support notification</li>
                        <li><i className="fas fa-times-circle"></i>☑️ Plugin Review notification</li>
                        <li><i className="fas fa-check-circle"></i> ☑️ Page create or updating alert</li>
                        <li><i className="fas fa-check-circle"></i> ☑️ Post create or updating alert</li>
                        <li><i className="fas fa-times-circle"></i>☑️ Website Health Score</li>
                        <li><i className="fas fa-times-circle"></i>☑️ Site health notification</li>
                        <li><i className="fas fa-times-circle"></i>☑️ Author panel</li>
                        <li><i className="fas fa-times-circle"></i>☑️ Plugin Update notification</li>
                        <li><i className="fas fa-times-circle"></i>☑️ WordPress Update notification</li>
                        <li><i className="fas fa-times-circle"></i>☑️ And more</li>
                    </ul>
                    <button onClick={handlePluginvisit}>Supports</button>
                </div>
                <div className="plan popular">
                    <span>Most Popular</span>
                    <h2>Pro</h2>
                    <div className="price"> {selectedLicense === '1' ? '$19.99' : selectedLicense === '5' ? '$35.14' : selectedLicense === '50' ? '$80.49' : '$19.99'}</div>
                    <ul className="features">
                        <li><i className="fas fa-check-circle"></i> ☑️ Realtime visitor traffic</li>
                        <li><i className="fas fa-check-circle"></i> ☑️ User avatar is displayed in the events for better recognizability</li>
                        <li><i className="fas fa-check-circle"></i> ☑️ IP Blocking/Whitelisting</li>
                        <li><i className="fas fa-check-circle"></i> ☑️ Conditional auto IP Blocker</li>
                        <li><i className="fas fa-check-circle"></i> ☑️ Monitoring Admin page access alerts</li>
                        <li><i className="fas fa-check-circle"></i> ☑️ Rate-Limiting Login Attempts</li>
                        <li><i className="fas fa-check-circle"></i> ☑️ Track File Uploads for Malicious Code</li>
                        <li><i className="fas fa-check-circle"></i> ☑️ Monitor WordPress Core file integrity</li>
                        <li><i className="fas fa-check-circle"></i> ☑️ Product editor notification [any changes]</li>
                        <li><i className="fas fa-check-circle"></i> ☑️ Shipping status notification</li>
                        <li><i className="fas fa-check-circle"></i> ☑️ Billing & Shipping Address notification</li>
                        <li><i className="fas fa-check-circle"></i> ☑️ Coupon uses notification</li>
                        <li><i className="fas fa-check-circle"></i> ☑️ Order not completed reminder</li>
                        <li><i className="fas fa-check-circle"></i> ☑️ Sales Notifications to Slack</li>
                        <li><i className="fas fa-check-circle"></i> ☑️ Get error notification</li>
                        <li><i className="fas fa-check-circle"></i> ☑️ Active debug mode from site</li>
                        <li><i className="fas fa-check-circle"></i> ☑️ Advance Error Log panel</li>
                        <li><i className="fas fa-check-circle"></i> ☑️ Enable weekly plugin download notification</li>
                        <li><i className="fas fa-check-circle"></i> ☑️ Enable day to day notification for support & review</li>
                        <li><i className="fas fa-check-circle"></i> ☑️ User account password change notification</li>
                        <li><i className="fas fa-check-circle"></i> ☑️ Lost password? Reset notification</li>
                        <li><i className="fas fa-check-circle"></i> ☑️ User Role change notification</li>
                        <li><i className="fas fa-check-circle"></i> ☑️ Login event with IP location alert</li>
                        <li><i className="fas fa-check-circle"></i> ☑️ Authentication failed alert with IP & Location</li>
                        <li><i className="fas fa-check-circle"></i> ☑️ User deletion event alert</li>
                        <li><i className="fas fa-check-circle"></i> ☑️ Core .htaccess modification alert</li>
                        <li><i className="fas fa-check-circle"></i> ☑️ Core wp-config modification alert</li>
                        <li><i className="fas fa-check-circle"></i> ☑️ Post taxonomy alert</li>
                        <li><i className="fas fa-check-circle"></i> ☑️ Full WordPress multisite support</li>

                        <li><i className="fas fa-check-circle"></i> ☑️ More upcomming feature</li>
                    </ul>
                    {/* <button>Buy Now</button> */}
                    <div className='license-selection'>
                        <select id="licenses" onChange={(e) => setSelectedLicense(e.target.value)} value={selectedLicense}>
                            <option value="1">Single Site License</option>
                            <option value="5">5-Site License</option>
                            <option value="50">50-Site License</option>
                        </select>
                    </div>
                    {!allConditionsMet ? (
                        // Show the "Buy Now?" button if allConditionsMet is true
                        <button className="btn" id="purchase-btn" onClick={handlePurchase}>Buy Now?</button>
                    ) : (
                        <button className="btn" id="purchase-btn" onClick={handlePurchase}>Purchase Again?</button>
                    )}
                </div>
                <div className="plan">
                    <h2>Upcomming</h2>

                    <ul className="features">
                        <li><i className="fas fa-check-circle"></i> ☑️ Database Prefix Change</li>
                        <li><i className="fas fa-check-circle"></i> ☑️ Export to CSV reports</li>
                        <li><i className="fas fa-check-circle"></i> ☑️ And more feature </li>

                        {/* <li><i className="fas fa-check-circle"></i> </li> */}
                    </ul>
                    <button onClick={getPro}>Contact Us</button>
                </div>
            </div>
            {modalOpen && <><div className="wcs_popup_overlay"></div> <Modal setOpenModal={setModalOpen} /> </>}
        </div>
    )
}

export default Pricing