import React, { useEffect, useState } from 'react';
import axios from "axios";
import VisibilityIcon from '@mui/icons-material/Visibility';
import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
import Container from '../core/Container';
import Row from '../core/Row';
import Column from '../core/Column';
import Card from '../core/Card';
import video from '../../assets/icons/support/youtube.svg'
import support from '../../assets/icons/support/support.svg'
import doc from '../../assets/icons/support/doc.svg'
import licenseicon from '../../assets/icons/support/license-maintenance.svg'
import wpxpertise from '../../assets/icons/support/logo.png'
import Modal from '../Components/Modal/Modal';
import Pricing from '../Components/Pricing/Pricing';
import { getNonce, isPro } from '../Helpers';
import "./documentation.scss";

function Documentation() {
    const proData = isPro();
    const [modalOpen, setModalOpen] = useState(false);
    const [activeFaq, setActiveFaq] = useState(null);

    const allConditionsMet = proData;
    const currentUrl = window.location.href;
    const adminIndex = currentUrl.indexOf('/wp-admin');
    const newUrl = currentUrl.substring(0, adminIndex) + "/wp-admin/plugin-install.php?s=wpazleen&tab=search&type=term";

    const handleSupport = () => {
        setModalOpen(true)
    }

    const faqs = [
        {
            question: "What type of MIME Types I can add in 'Allowed file type and Track File Uploads for Malicious Code'?",
            answer: "WordPress restricts both file types and MIME types, with new types added via code updates. You can choose from approved formats such as <span class='code-format'><code>image/jpeg, image/png, application/pdf, application/zip or video/mp4</code></span> <br> Visit the blog to know more: <a href='https://wpazleen.com/https-yourwebsite-com-mime-types-in-wordpress/' target='_blank'>View</a>"
        },
        {
            question: "I noticed that my dashboard isn't displaying any information such as 'Today Activated Plugins', 'Plugin Updates', or similar notifications. What steps should I take to resolve this?",
            answer: "To resolve this issue, you need to configure the dashboard settings to enable the desired notifications. Please follow these steps: <br>1. Navigate to the ⚙️Configuration page in your dashboard. <br>2. Click on User Activity to access related settings. <br>3. In the Site Settings Panel, ensure you activate the following features: - 'Plugin Activation/Deactivation Notice' - 'Login/Logout Alert' - And any other relevant notifications you wish to receive. <br>Once these settings are configured, your dashboard should provide a comprehensive overview of the plugin activities and updates."
        },
        {
            question: "How can I verify if my Webhook is configured correctly?",
            answer: "To test your Webhook configuration, first, enter the Webhook URL in the 'API & Configuration' tab and click 'Save'. Then, input your desired message and click 'Test Webhook'. If you receive a response in your Slack channel, it confirms that your Webhook is successfully connected."
        },
        {
            question: "What is the difference between 'Enable Unresolved Support Notification' and 'Enable Day-to-Day Notification for Support'?",
            answer: "Both options are used to send updates from the WordPress support forum. However, 'Enable Unresolved Support Notification' will send notifications for all unresolved tickets with given interval until they are resolved by the organization, which can lead to duplicates. In contrast, 'Enable Day-to-Day Notification for Support' will not send the same review multiple times; it will only send newly created reviews on a daily basis."
        },
        {
            question: "How to get Pro plugin?",
            answer: "After your purchase, you will receive an email containing the license for the Pro version. <span class='code-format'><code>Also available for download on the My Account page.</code></span>"
        },
        {
            question: "Refund policy?",
            answer: "You are fully protected by our 100% Money Back Guarantee. If during the next 14 days you experience an issue that makes the plugin unusable and we are unable to resolve it, we'll happily consider offering a full refund of your money."
        },
        {
            question: "I want a refund for my purchase of the plugin. What is the procedure?",
            answer: "We have a 14 days refund policy. Please email us explaining why you would like to get a refund with purchase information."
        },
    ];

    const toggleFaq = (index) => {
        setActiveFaq(activeFaq === index ? null : index);
    };

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

        handler.open({
            name: 'Notifier To Slack',
            licenses: 5,
            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);
            }
        }); */

        window.open('https://wpazleen.com/pricing/', '_blank');
    }

    return (
        <Container customClass="documentation-page-wrap">
            <Row customClass='documentation-flex-row'>
                <Column lg="3" sm="4">
                    <Card customClass='documentation-card' onClick={!allConditionsMet ? handlePurchaseplan : handleSupport}>
                        <a onClick={!allConditionsMet ? handlePurchaseplan : handleSupport} target="_blank" className="single-doc-item">
                        </a>
                        <img className="wpnts_logo_footer" src={licenseicon} alt="licenseicon" />

                        {!allConditionsMet ? (
                            <>
                                <h4>Don't have any license?</h4>
                                <button className="unlock-register button" id="purchase-btn" onClick={handlePurchaseplan} > Get Premium </button>
                            </>
                        ) : (
                            <>
                                <h4>Need premium assistance?</h4>
                                <button className="unlock-register button" onClick={handleSupport} >Contact Us!</button>
                            </>
                        )}
                    </Card>
                </Column>

                <Column lg="3" sm="4">
                    <Card customClass='documentation-card'>
                        <a href="https://www.youtube.com/playlist?list=PLWeDkVnCRHAYC5N_J5l_Kzsb2myCX6QuS" target="_blank" className="single-doc-item"></a>
                        <img className="wpnts_logo_footer youtube-icon" src={video} alt="staff" />
                        <h4>Video Tutorial</h4>
                    </Card>
                </Column>

                <Column lg="3" sm="4">
                    <Card customClass='documentation-card'>
                        <a href="https://wordpress.org/support/plugin/notifier-to-slack/" target="_blank" className="single-doc-item"></a>
                        <img className="wpnts_logo_footer" src={support} alt="staff" />
                        <h4>Need support</h4>
                    </Card>
                </Column>

                <Column lg="3" sm="4">
                    <Card customClass='documentation-card'>
                        <a href={`${newUrl}/plugin-install.php?s=wpazleen&tab=search&type=term`} target="_blank" className="single-doc-item"></a>
                        <img className="wpnts_logo_footer" src={doc} alt="staff" />
                        <h4>Other Product</h4>
                    </Card>
                </Column>
            </Row>

            <div className="scan-faq-section">
                <h3>Frequently Asked Questions</h3>
                <div className="scan-faq-list">
                    {faqs.map((faq, index) => (
                        <div className={`scan-faq-item ${activeFaq === index ? 'active' : ''}`} key={index}>
                            <div className="scan-faq-question" onClick={() => toggleFaq(index)}>
                                {faq.question}
                                <span className="scan-faq-toggle">{activeFaq === index ? '−' : '+'}</span>
                            </div>
                            {activeFaq === index && (
                                <div className="scan-faq-answer" dangerouslySetInnerHTML={{ __html: faq.answer }} />
                            )}
                        </div>
                    ))}
                </div>
            </div>

            {!allConditionsMet ? (
                <>
                    <Card customClass="feature-list-with-plan">
                        <Pricing />
                    </Card>
                </>
            ) : (
                <></>
            )}

            {modalOpen && <><div className="wcs_popup_overlay"></div> <Modal setOpenModal={setModalOpen} /> </>}
        </Container>
    );
}

export default Documentation;