import React, { useState, useEffect } from "react";
import axios from "axios";
import VisibilityIcon from '@mui/icons-material/Visibility';
import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
import PlayCircleIcon from '@mui/icons-material/PlayCircle';
import ReactSwitchreview from 'react-switch'
import ReactSwitchsupport from 'react-switch'
import ReactPlayer from 'react-player'
import Modal from '../Modal/Modal';
import { isPro, getNoticeData } from '../../Helpers';
import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
import orderStatus from '../../../assets/order-status.gif'
import Tippy from '@tippy.js/react';
import 'tippy.js/dist/tippy.css'
import NoticeModal from '../NoticeModal/NoticeModal';
import "./page.scss"

const PageNPost = ({ noticeSettings }) => {
    const [modalOpen, setModalOpen] = useState(false);
    const [passview, setPassview] = useState(false);
    const [credentials, setCredentials] = useState([]);
    const [getGlobalURL, setGetGlobalURL] = useState(false);
    const proData = isPro();

    const allConditionsMet = proData;


    // Extract the last part of the URL as the site identifier
    const pathParts = window.location.pathname.split("/").filter(Boolean);
    const indexOfAdmin = pathParts.indexOf('wp-admin');
    const siteIdentifier = indexOfAdmin !== -1 ? pathParts.slice(indexOfAdmin - 1, indexOfAdmin).pop() : pathParts.slice(-1).pop();
    // Use the site identifier to create a unique localStorage key
    const localStorageKey = `wpnts_pageNpost_settings_${siteIdentifier}`;
    //END ------------------
    const [modalConfig, setModalConfig] = useState({
        isOpen: false,
        type: 'confirmation',
        title: '',
        message: '',
        onConfirm: () => { },
        confirmText: 'Confirm',
        declineText: 'Cancel'
    });
    const closeModal = () => {
        setModalConfig(prev => ({ ...prev, isOpen: false }));
    };

    const handleViewpass = () => {
        passview === true ? setPassview(false) : setPassview(true)
    }

    useEffect(() => {
        getWebhook();
    }, []);

    function getWebhook() {
        const wpnts_post_security_settings = getNoticeData().wpntswebhook_pagenpost_settings || {
            webhook: "",
            newpagecreate: false,
            newpostcreate: false,
            posttaxonomy: false,

        };

        const formData = JSON.parse(localStorage.getItem(localStorageKey) || JSON.stringify(wpnts_post_security_settings));
        setCredentials(formData);
    }



    const [wpntswebhook_pagenpost_settings, setWebhook] = useState({
        webhook: credentials.webhook,
        newpagecreate: credentials.newpagecreate,
        newpostcreate: credentials.newpostcreate,
        posttaxonomy: credentials.posttaxonomy,
        maketrash: credentials.maketrash,
        makeuntrash: credentials.makeuntrash,
        deletepostnpage: credentials.deletepostnpage,
        authorPaneltoMail: credentials.authorPaneltoMail,

    });

    const handleGetGlobalURLChange = () => {
        const globalSlack = noticeSettings.wpnts_global_api_settings.global_webhook ?? '';
        setWebhook(prev => ({ ...prev, webhook: globalSlack }))
    };

    const handleChange = e => {
        setWebhook(prev => ({ ...prev, [e.target.name]: e.target.value }))
    }

    const handleAuthorPaneltoMail = (e) => {
        const isChecked = event.target.checked;
        setWebhook((prev) => ({
            ...prev,
            authorPaneltoMail: isChecked,
        }));
    }

    /**
     * 
     * @param {Core WP CONFIG} e 
     * @returns 
     */
    const handleNewpagecreate = e => {

        // setNewpagecreate(e);
        setWebhook(prev => ({ ...prev, newpagecreate: e }));
    }

    /**
     * 
     * @param {HtAccess} e 
     * @returns 
     */
    const handleNewpostcreate = e => {
        if (!allConditionsMet) {
            // setModalOpen(true)
            setModalConfig({
                isOpen: true,
                type: 'premium',
                title: '🚀 Oops! This is a Premium Feature',
                message: 'Evaluate the features and select a bundle based on your needs.',
                onConfirm: () => {
                    window.open('https://functiondeck.com/pricing/', '_blank');
                    closeModal();
                },
                confirmText: 'Upgrade Now',
                declineText: 'Maybe Later'
            });
            return;
        }
        // setNewpostcreate(e);
        setWebhook(prev => ({ ...prev, newpostcreate: e }));
    }

    const handlePosttaxonomy = e => {
        if (!allConditionsMet) {
            // setModalOpen(true)
            setModalConfig({
                isOpen: true,
                type: 'premium',
                title: '🚀 Oops! This is a Premium Feature',
                message: 'Evaluate the features and select a bundle based on your needs.',
                onConfirm: () => {
                    window.open('https://functiondeck.com/pricing/', '_blank');
                    closeModal();
                },
                confirmText: 'Upgrade Now',
                declineText: 'Maybe Later'
            });
            return;
        }
        // setPosttaxonomy(e);
        setWebhook(prev => ({ ...prev, posttaxonomy: e }));
    }

    const handleMaketrash = e => {
        if (!allConditionsMet) {
            // setModalOpen(true)
            setModalConfig({
                isOpen: true,
                type: 'premium',
                title: '🚀 Oops! This is a Premium Feature',
                message: 'Evaluate the features and select a bundle based on your needs.',
                onConfirm: () => {
                    window.open('https://functiondeck.com/pricing/', '_blank');
                    closeModal();
                },
                confirmText: 'Upgrade Now',
                declineText: 'Maybe Later'
            });
            return;
        }
        // setMaketrash(e);
        setWebhook(prev => ({ ...prev, maketrash: e }));
    }

    const handleMakeuntrash = e => {
        if (!allConditionsMet) {
            // setModalOpen(true)
            setModalConfig({
                isOpen: true,
                type: 'premium',
                title: '🚀 Oops! This is a Premium Feature',
                message: 'Evaluate the features and select a bundle based on your needs.',
                onConfirm: () => {
                    window.open('https://functiondeck.com/pricing/', '_blank');
                    closeModal();
                },
                confirmText: 'Upgrade Now',
                declineText: 'Maybe Later'
            });
            return;
        }
        // setMakeuntrash(e);
        setWebhook(prev => ({ ...prev, makeuntrash: e }));
    }

    const handleDeletepostnpage = e => {

        // setDeletepostnpage(e);
        setWebhook(prev => ({ ...prev, deletepostnpage: e }));
    }


    useEffect(() => {
        setWebhook({
            webhook: credentials.webhook,
            newpagecreate: credentials.newpagecreate,
            newpostcreate: credentials.newpostcreate,
            posttaxonomy: credentials.posttaxonomy,
            maketrash: credentials.maketrash,
            makeuntrash: credentials.makeuntrash,
            deletepostnpage: credentials.deletepostnpage,
            authorPaneltoMail: credentials.authorPaneltoMail,
        });
    }, [credentials]);


    const handleSave = async e => {
        e.preventDefault()
        localStorage.setItem(localStorageKey, JSON.stringify(wpntswebhook_pagenpost_settings));

        //
        /**
         * Add new plugin list name 
         * 
         */
        const url = `${appLocalizer.wpntsUrl}/wpnts/v1/slack_webhook_pagenpost_settings`;
        try {
            const res = await axios.post(url, {
                wpntswebhook_pagenpost_settings

            }, {
                headers: {
                    'content-type': 'application/json',
                    'X-WP-NONCE': appLocalizer.nonce
                }
            }).then(function (res) {
                // console.log(wpntswebhook_pagenpost_settings)
            });

        } catch (err) {
            console.log(err);
        }


        setModalConfig({
            isOpen: true,
            type: 'toast',
            title: 'success!',
            message: 'Webhook configure successfully',
            position: 'top-right'
        });
        setTimeout(closeModal, 3000);

    }
    return (
        <div className="acb_pagenpost" id='acb_pagenpost'>
            <div className="acb_left">
                <h3>Advance Page and Post settings panel
                    <a href="https://www.youtube.com/playlist?list=PL4m92NgWQaq5ttBH9gSYUX1r4c6rtgLg9" target="_blank"><PlayCircleIcon className='PlayCircleIcon' /></a>
                </h3>
                <br />

                <div className="wpnts-switch-sitescriptmodification">
                    {/* {!allConditionsMet ? <p className="PRO_TAG">PRO</p> : ''} */}
                    {/* <p className="NEW_TAG">New</p> */}
                    <div className={`page-post-settings`}>
                        <ReactSwitchsupport uncheckedIcon checkedIcon className="sitessecurity-supportSwitch-2" name="wpnts-switch-p-activation" id="newpagecreate" onChange={handleNewpagecreate} checked={wpntswebhook_pagenpost_settings.newpagecreate} height={20} width={40} boxShadow="0px 1px 5px rgba(0, 0, 0, 0.6)"
                            activeBoxShadow="0px 0px 1px 10px rgba(0, 0, 0, 0.2)" />
                        <label htmlFor="newpagecreate">Page create or updating alert:</label>
                        <Tippy content="You will be notified as soon as there are any changes to the Core wp-config file on your site.">
                            <span className="wcs_title"><HelpOutlineIcon className='wcs_tooltip_icon' /></span>
                        </Tippy>

                    </div>
                </div>

                <div className="wpnts-switch-sitessecurityissues">
                    {/* {!allConditionsMet ? <p className="PRO_TAG">PRO</p> : ''} */}
                    {/* <p className="NEW_TAG">New</p> */}
                    <div className={`page-post-settings`}>
                        <ReactSwitchsupport uncheckedIcon checkedIcon className="sitessecurity-supportSwitch-3" name="wpnts-switch-p-deactivation" id="deletepostnpage" onChange={handleDeletepostnpage} checked={wpntswebhook_pagenpost_settings.deletepostnpage} height={20} width={40} boxShadow="0px 1px 5px rgba(0, 0, 0, 0.6)"
                            activeBoxShadow="0px 0px 1px 10px rgba(0, 0, 0, 0.2)" />
                        <label htmlFor="deletepostnpage">Page & Post permanently deleted alert:</label>
                        <Tippy content="You will be notified as soon as there are any changes to the Core .htaccess file on your site.">
                            <span className="wcs_title"><HelpOutlineIcon className='wcs_tooltip_icon' /></span>
                        </Tippy>

                    </div>
                </div>

                <div className="wpnts-switch-sitescriptmodification">
                    {!allConditionsMet ? <p className="PRO_TAG">PRO</p> : ''}
                    {/* <p className="NEW_TAG">New</p> */}
                    <div className={`wpnts_ispro ${allConditionsMet ? '' : 'inactive'}`}>
                        <ReactSwitchsupport uncheckedIcon checkedIcon className="sitessecurity-supportSwitch-2" name="wpnts-switch-p-activation" id="newpostcreate" onChange={handleNewpostcreate} checked={wpntswebhook_pagenpost_settings.newpostcreate} height={20} width={40} boxShadow="0px 1px 5px rgba(0, 0, 0, 0.6)"
                            activeBoxShadow="0px 0px 1px 10px rgba(0, 0, 0, 0.2)" />
                        <label htmlFor="newpostcreate">Post create or updating alert:</label>
                        <Tippy content="You will be notified as soon as there are any changes to the Core wp-config file on your site.">
                            <span className="wcs_title"><HelpOutlineIcon className='wcs_tooltip_icon' /></span>
                        </Tippy>

                    </div>
                </div>



                <div className="wpnts-switch-sitessecurityissues">
                    {!allConditionsMet ? <p className="PRO_TAG">PRO</p> : ''}
                    {/* <p className="NEW_TAG">New</p> */}
                    <div className={`wpnts_ispro ${allConditionsMet ? '' : 'inactive'}`}>
                        <ReactSwitchsupport uncheckedIcon checkedIcon className="sitessecurity-supportSwitch-3" name="wpnts-switch-p-deactivation" id="posttaxonomy" onChange={handlePosttaxonomy} checked={wpntswebhook_pagenpost_settings.posttaxonomy} height={20} width={40} boxShadow="0px 1px 5px rgba(0, 0, 0, 0.6)"
                            activeBoxShadow="0px 0px 1px 10px rgba(0, 0, 0, 0.2)" />
                        <label htmlFor="posttaxonomy">Post taxonomy alert:</label>
                        <Tippy content="You will be notified as soon as there are any changes to the Core .htaccess file on your site.">
                            <span className="wcs_title"><HelpOutlineIcon className='wcs_tooltip_icon' /></span>
                        </Tippy>

                    </div>
                </div>

                <div className="wpnts-switch-sitessecurityissues">
                    {!allConditionsMet ? <p className="PRO_TAG">PRO</p> : ''}
                    {/* <p className="NEW_TAG">New</p> */}
                    <div className={`wpnts_ispro ${allConditionsMet ? '' : 'inactive'}`}>
                        <ReactSwitchsupport uncheckedIcon checkedIcon className="sitessecurity-supportSwitch-3" name="wpnts-switch-p-deactivation" id="maketrash" onChange={handleMaketrash} checked={wpntswebhook_pagenpost_settings.maketrash} height={20} width={40} boxShadow="0px 1px 5px rgba(0, 0, 0, 0.6)"
                            activeBoxShadow="0px 0px 1px 10px rgba(0, 0, 0, 0.2)" />
                        <label htmlFor="maketrash">Page/Post make trash alert:</label>
                        <Tippy content="You will be notified as soon as there are any changes to the Core .htaccess file on your site.">
                            <span className="wcs_title"><HelpOutlineIcon className='wcs_tooltip_icon' /></span>
                        </Tippy>

                    </div>
                </div>

                <div className="wpnts-switch-sitessecurityissues">
                    {!allConditionsMet ? <p className="PRO_TAG">PRO</p> : ''}
                    {/* <p className="NEW_TAG">New</p> */}
                    <div className={`wpnts_ispro ${allConditionsMet ? '' : 'inactive'}`}>
                        <ReactSwitchsupport uncheckedIcon checkedIcon className="sitessecurity-supportSwitch-3" name="wpnts-switch-p-deactivation" id="makeuntrash" onChange={handleMakeuntrash} checked={wpntswebhook_pagenpost_settings.makeuntrash} height={20} width={40} boxShadow="0px 1px 5px rgba(0, 0, 0, 0.6)"
                            activeBoxShadow="0px 0px 1px 10px rgba(0, 0, 0, 0.2)" />
                        <label htmlFor="makeuntrash">Page/Post untrash alert:</label>
                        <Tippy content="You will be notified as soon as there are any changes to the Core .htaccess file on your site.">
                            <span className="wcs_title"><HelpOutlineIcon className='wcs_tooltip_icon' /></span>
                        </Tippy>

                    </div>
                </div>


            </div>
            <div className="acb_right">

                {/* <form action="" id="wpntswebhook_pagenpost_settings"> */}
                <form action="" id="wpnts_post_security_settings">
                    <div className="formInput">
                        <label htmlFor="webhook">Webhook URL</label>
                        <div className="wpnts-setting">
                            <div className="passimg" onClick={handleViewpass}>
                                {passview === false ? <VisibilityOffIcon className='passVisibility' /> : <VisibilityIcon className='passVisibility' />}
                            </div>
                            <input type={passview === true ? "text" : "password"} placeholder="add webhook " name="webhook" required onChange={handleChange} value={wpntswebhook_pagenpost_settings.webhook} />
                        </div>
                    </div>

                    <div className="getGlobalURLCheckbox">
                        <input
                            type="checkbox"
                            id="getGlobalURL"
                            checked={getGlobalURL}
                            onChange={handleGetGlobalURLChange}
                        />
                        <label htmlFor="getGlobalURL">Click to get slack global webhook</label>
                    </div>

                    <button className="save-webhook" onClick={handleSave}>SAVE</button>
                </form>

            </div>

            <NoticeModal
                isOpen={modalConfig.isOpen}
                onClose={closeModal}
                onConfirm={modalConfig.onConfirm}
                onDecline={closeModal}
                type={modalConfig.type}
                title={modalConfig.title}
                message={modalConfig.message}
                confirmText={modalConfig.confirmText}
                declineText={modalConfig.declineText}
                position={modalConfig.position || 'center'}
                autoClose={modalConfig.type === 'toast'}
                autoCloseTime={3000}
            />
            {modalOpen && <><div class="wcs_popup_overlay"></div> <Modal setOpenModal={setModalOpen} /> </>}
        </div >
    )
}

export default PageNPost
