import React, { useState, useRef } from "react";
import ReactSwitchreview from "react-switch";
import KeyIcon from '@mui/icons-material/Key';
import { Turnstile } from "@marsidev/react-turnstile";
import { getNonce, turnsTile } from './../../Helpers';

const CaptchaTab = ({
    cloudflareCaptchaEnable,
    setCloudflareCaptchaEnable,
    siteKey,
    setSiteKey,
    secretKey,
    setSecretKey,
    setModalConfig,
    closeModal
}) => {
    const widgetRef = useRef(null);
    const [token, setToken] = useState('');
    const [success, setSuccess] = useState(false);
    const [error, setError] = useState(false);
    const [connectSuccess, setConnectSuccess] = useState(false);

    const siteKeygetDB = turnsTile();
    const siteKeygetfromDB = siteKeygetDB['siteKey'];
    const validatedfromDB = siteKeygetDB['validated'];

    const handleCloudflareCaptchaEnable = (checked) => {
        setCloudflareCaptchaEnable(checked);
    };

    const handleOnSuccess = (data) => {
        setToken(data);
    };

    const handleError = (data) => {
        setToken(data);
    };

    const handleStoreCaptcha = () => {
        if (siteKey === '' || secretKey === '') {
            setModalConfig({
                isOpen: true,
                type: 'toast',
                title: 'Warning!',
                message: 'Need keys to connect!',
                position: 'top-right',
                mode: 'error',
            });
            setTimeout(closeModal, 3000);
            return;
        }

        setModalConfig({
            isOpen: true,
            type: 'confirmation',
            title: 'Verify',
            mode: 'success',
            message: 'Verify and store your API with CLoudFlare!',
            onConfirm: () => {
                wp.ajax.send('simpleform_store_captcha', {
                    data: {
                        nonce: getNonce(),
                        cloudflareCaptchaEnable,
                        siteKey,
                        secretKey,
                    },
                    success(response) {
                        setSuccess(true);
                        setError(false);

                        setModalConfig({
                            isOpen: true,
                            type: 'toast',
                            title: 'Store!',
                            message: 'API keys have been stored.',
                            position: 'top-right',
                            mode: 'success',
                        });
                        setTimeout(closeModal, 3000);
                    },
                    error(error) {
                        setError(true);
                        setSuccess(false);

                        setModalConfig({
                            isOpen: true,
                            type: 'toast',
                            title: 'Error!',
                            message: 'Failed to store.',
                            position: 'top-right',
                            mode: 'error',
                        });
                        setTimeout(closeModal, 3000);
                    },
                });
                closeModal();
            },
            confirmText: 'Yes, Save!',
            declineText: 'Cancel'
        });
    };

    const handleConnectCaptcha = () => {
        setConnectSuccess(!connectSuccess);
        if (secretKey === '') {
            setModalConfig({
                isOpen: true,
                type: 'toast',
                title: 'Warning!',
                message: 'Need keys to connect!',
                position: 'top-right',
                mode: 'error',
            });
            setTimeout(closeModal, 3000);
            return;
        }

        setModalConfig({
            isOpen: true,
            type: 'confirmation',
            title: 'Connect',
            mode: 'success',
            message: 'Attempt to connect!',
            onConfirm: () => {
                wp.ajax.send('simpleform_connect_captcha', {
                    data: {
                        nonce: getNonce(),
                        token,
                        secretKey,
                        siteKey,
                    },
                    success(response) {
                        setConnectSuccess(true);
                        setError(false);

                        setModalConfig({
                            isOpen: true,
                            type: 'toast',
                            title: 'Connected',
                            message: 'Your site has been Connected.',
                            position: 'top-right',
                            mode: 'success',
                        });
                        setTimeout(closeModal, 3000);
                    },
                    error(error) {
                        setError(true);
                        setConnectSuccess(false);

                        setModalConfig({
                            isOpen: true,
                            type: 'toast',
                            title: 'Error!',
                            message: 'Failed to connect.',
                            position: 'top-right',
                            mode: 'error',
                        });
                        setTimeout(closeModal, 3000);
                    },
                });
                closeModal();
            },
            confirmText: 'Yes, Connect!',
            declineText: 'Cancel'
        });
    };

    return (
        <div className="cache-panel">
            <h3 className="review-case-title">Contact form captcha panel</h3>
            <div className="form-customization">
                <div className="wpnts-switch-review">
                    <label className="form-feature-heading" htmlFor="cloudflareCaptchaEnable">Enable Cloudflare Captcha:</label>
                    <ReactSwitchreview
                        checked={cloudflareCaptchaEnable}
                        className="cloudflareCaptchaEnable"
                        name="cloudflareCaptchaEnable"
                        id="cloudflareCaptchaEnable"
                        onChange={handleCloudflareCaptchaEnable}
                    />
                </div>

                <div className="settings-panel">
                    {cloudflareCaptchaEnable && (
                        <div>
                            {siteKey && siteKey.length >= 8 && (
                                <Turnstile
                                    ref={widgetRef}
                                    siteKey={siteKey}
                                    onError={(e) => handleError(e)}
                                    onSuccess={(e) => handleOnSuccess(e)}
                                    options={{
                                        theme: "light",
                                    }}
                                />
                            )}

                            <div className="cloudflare-get-key">
                                <KeyIcon className="key-icon" />
                                <span>
                                    <a
                                        target="_blank"
                                        href="https://dash.cloudflare.com/?to=/:account/turnstile"
                                        rel="noreferrer"
                                        className="get-keys"
                                    >
                                        Click here
                                    </a> to get your <strong>Site Key</strong> and <strong>Secret Key</strong> then paste them below
                                </span>
                            </div>

                            <div className="formInput">
                                <label className="form-feature-sub-heading" htmlFor="siteKey">Site Key</label>
                                <div className="wpnts-setting">
                                    <input
                                        id="siteKey"
                                        className="colorSelectionhover"
                                        type="text"
                                        name="siteKey"
                                        value={siteKey}
                                        onChange={(e) => setSiteKey(e.target.value)}
                                    />
                                </div>
                            </div>

                            <div className="formInput">
                                <label className="form-feature-sub-heading" htmlFor="secretKey">Secret Key</label>
                                <div className="wpnts-setting">
                                    <input
                                        id="secretKey"
                                        className="colorSelectionhover"
                                        type="text"
                                        name="secretKey"
                                        value={secretKey}
                                        onChange={(e) => setSecretKey(e.target.value)}
                                    />
                                </div>
                            </div>

                            {error && (
                                <div className="ErrorMessage">
                                    <h5>Error! Your Secret Key does not match with the Cloudflare Turnstile!
                                        <a href="https://dash.cloudflare.com/?to=/:account/turnstile" rel="noreferrer" target="_blank">view</a>
                                    </h5>
                                </div>
                            )}

                            {success && !error && (
                                <div className="SuccessMessage">
                                    <h5>Thanks! Click to verify and connect the Cloudflare Turnstile!</h5>
                                </div>
                            )}

                            {!success && (
                                <button className="ConnectCaptcha-btn" onClick={handleStoreCaptcha} type="button">
                                    Verify
                                </button>
                            )}

                            {success && (
                                <button className="ConnectCaptcha-btn" onClick={handleConnectCaptcha} type="button">
                                    {connectSuccess && validatedfromDB ? "Connected" : "Connect"}
                                </button>
                            )}

                            <div className="seperationLine">
                                <hr />
                            </div>
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
};

export default CaptchaTab;