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 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 { isPro, getNoticeData } from '../../Helpers';
import NoticeModal from '../NoticeModal/NoticeModal';
import "./site.scss";

const Site = ({ 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_sites_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_site_settings = getNoticeData().wpnts_schedules_interval_site_settings || {
      webhook: "",
      interval_plugin_update: "",
      interval_sitehelgth_update: "",
      intervalDays: -1,

      sitehelgth: false,
      rolechangenotification: false,
      registration: false,
      plugindeactivation: false,
      pluginupdate: false,
      pluginactivation: false,

      lostpassreset: false,
      loginandout: false,
      loginalertwithip: false,
      accountpassreset: false,


    };

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



  const [wpntswebhook_site_settings, setWebhook] = useState({
    webhook: credentials.webhook,
    authorPaneltoMail: credentials.authorPaneltoMail,
    interval_plugin_update: credentials.interval_plugin_update,
    interval_sitehelgth_update: credentials.interval_sitehelgth_update,
    intervalDays: credentials.intervalDays,
    pluginactivation: credentials.pluginactivation,
    plugindeactivation: credentials.plugindeactivation,
    pluginupdate: credentials.pluginupdate,
    updatenotification: credentials.updatenotification,
    wpnotification: credentials.wpnotification,
    userdeletion: credentials.userdeletion,
    authenticaltionfailed: credentials.authenticaltionfailed,

    loginandout: credentials.loginandout,
    loginalertwithip: credentials.loginalertwithip,
    sitehelgth: credentials.sitehelgth,
    registration: credentials.registration,
    rolechangenotification: credentials.rolechangenotification,
    lostpassreset: credentials.lostpassreset,
    accountpassreset: credentials.accountpassreset,
  });

  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 handlePluginactivation = e => {

    setWebhook(prev => ({ ...prev, pluginactivation: e }));
  }
  const handlePlugindeactivation = e => {

    setWebhook(prev => ({ ...prev, plugindeactivation: e }));
  }
  const handlePluginupdate = e => {

    setWebhook(prev => ({ ...prev, pluginupdate: e }));
  }
  const handleUpdatenotification = e => {

    setWebhook(prev => ({ ...prev, updatenotification: e }));
  }
  const handleWpnotification = e => {

    setWebhook(prev => ({ ...prev, wpnotification: e }));
  }
  const handleLoginandout = e => {

    setWebhook(prev => ({ ...prev, loginandout: e }));
  }

  const handleRegistration = e => {

    setWebhook(prev => ({ ...prev, registration: e }));
  }
  const handleSitehelgth = e => {

    setWebhook(prev => ({ ...prev, sitehelgth: e }));

  }

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


  const handleRoleChangealert = 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;
    }

    setWebhook(prev => ({ ...prev, rolechangenotification: e }));

  }
  const handleLoginalertwithip = 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;
    }

    setWebhook(prev => ({ ...prev, loginalertwithip: e }));

  }

  const handleUserdeletion = e => {
    if (!allConditionsMet) {
      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;
    }

    setWebhook(prev => ({ ...prev, userdeletion: e }));

  }
  const handleAuthenticaltionfailed = e => {
    if (!allConditionsMet) {
      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;
    }

    setWebhook(prev => ({ ...prev, authenticaltionfailed: e }));

  }

  /**
   * 
   * @param {Lost pass reset} e 
   * @returns 
   */
  const handlelostpassreset = e => {
    if (!allConditionsMet) {
      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;
    }

    setWebhook(prev => ({ ...prev, lostpassreset: e }));

  }

  const handleAccountpassreset = e => {
    if (!allConditionsMet) {
      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;
    }

    setWebhook(prev => ({ ...prev, accountpassreset: e }));

  }

  useEffect(() => {
    setWebhook({
      webhook: credentials.webhook,
      authorPaneltoMail: credentials.authorPaneltoMail,
      interval_plugin_update: credentials.interval_plugin_update,
      interval_sitehelgth_update: credentials.interval_sitehelgth_update,
      intervalDays: credentials.intervalDays,
      pluginactivation: credentials.pluginactivation,
      plugindeactivation: credentials.plugindeactivation,
      pluginupdate: credentials.pluginupdate,
      updatenotification: credentials.updatenotification,
      wpnotification: credentials.wpnotification,

      userdeletion: credentials.userdeletion,
      authenticaltionfailed: credentials.authenticaltionfailed,

      loginandout: credentials.loginandout,
      loginalertwithip: credentials.loginalertwithip,
      sitehelgth: credentials.sitehelgth,
      registration: credentials.registration,
      rolechangenotification: credentials.rolechangenotification,
      lostpassreset: credentials.lostpassreset,
      accountpassreset: credentials.accountpassreset,
    });
  }, [credentials]);
  // }, [credentials, activereview, activesupport]);


  const handleIntervalDays = (e) => {
    const selectedInterval = parseInt(e.target.value, 10);
    setWebhook((prev) => ({
      ...prev,
      intervalDays: selectedInterval,
    }));
  }

  const handleintervalPluginUpdate = (e) => {
    const selectedInterval = parseInt(e.target.value, 10);
    setWebhook((prev) => ({
      ...prev,
      interval_plugin_update: selectedInterval,
    }));
  }

  const handleSiteHelgthinterval = (e) => {
    const selectedInterval = parseInt(e.target.value, 10);
    setWebhook((prev) => ({
      ...prev,
      interval_sitehelgth_update: selectedInterval,
    }));
  }

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

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

      }, {
        headers: {
          'content-type': 'application/json',
          'X-WP-NONCE': appLocalizer.nonce
        }
      }).then(function (res) {
        // console.log(wpntswebhook_site_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_sites" id='acb_sites'>
      <div className="acb_left">
        {/* <h3>Choose your preferable setting</h3> */}
        <h3>Site settings panel
          <a href="https://www.youtube.com/playlist?list=PL4m92NgWQaq5ttBH9gSYUX1r4c6rtgLg9" target="_blank"><PlayCircleIcon className='PlayCircleIcon' /></a>
        </h3>
        <br />

        <div className="wpnts-switch-pluginactivation">
          <ReactSwitchsupport uncheckedIcon checkedIcon className="supportSwitch-2" name="wpnts-switch-p-activation" id="pluginactivation" onChange={handlePluginactivation} checked={wpntswebhook_site_settings.pluginactivation} 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="pluginactivation">Plugin Activation notice:</label>
          <Tippy content="It will send you the name of the plugin actvator in your slack as well as in the dashboard panel when it was activated and by whom.">
            <span className="wcs_title"><HelpOutlineIcon className='wcs_tooltip_icon' /></span>
          </Tippy>

        </div>

        <div className="wpnts-switch-plugindeactivation">
          <ReactSwitchsupport uncheckedIcon checkedIcon className="supportSwitch-3" name="wpnts-switch-p-deactivation" id="plugindeactivation" onChange={handlePlugindeactivation} checked={wpntswebhook_site_settings.plugindeactivation} 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="plugindeactivation">Plugin Deactivation notice:</label>
          <Tippy content="It will send you the name of the plugin deactivator in your slack as well as in the dashboard panel when it was deactivated and by whom.">
            <span className="wcs_title"><HelpOutlineIcon className='wcs_tooltip_icon' /></span>
          </Tippy>

        </div>

        <div className="wpnts-switch-plugindeactivation">
          <p className="NEW_TAG">New</p>
          <ReactSwitchsupport uncheckedIcon checkedIcon className="supportSwitch-3" name="wpnts-switch-p-deactivation" id="pluginupdate" onChange={handlePluginupdate} checked={wpntswebhook_site_settings.pluginupdate} 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="pluginupdate">Plugin update by admin notice:</label>
          <Tippy content="It will send you notice once any plugin updated.">
            <span className="wcs_title"><HelpOutlineIcon className='wcs_tooltip_icon' /></span>
          </Tippy>

        </div>
        <div className="wpnts-switch-wpnotification">
          <div className="parent-section">
            <div className="toogle-section">
              <ReactSwitchsupport uncheckedIcon checkedIcon className="supportSwitch-5" name="wpnts-switch-wpnotification" id="wpnotification" onChange={handleWpnotification} checked={wpntswebhook_site_settings.wpnotification} 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="wpnotification">WordPress Update notification:</label>
              <Tippy content="It will send WordPress update notification based on the given interval.">
                <span className="wcs_title"><HelpOutlineIcon className='wcs_tooltip_icon' /></span>
              </Tippy>
            </div>

            <div className="section-child">
              {wpntswebhook_site_settings.wpnotification ?
                <div className="formInput">
                  <label htmlFor="interval_plugin_update">Time Interval for WP Core</label>
                  <div className="wpnts-setting">
                    <select
                      name="interval_plugin_update"
                      required
                      onChange={handleintervalPluginUpdate}
                      value={wpntswebhook_site_settings.interval_plugin_update}
                      className="site-select-fields"
                    >
                      <option value={60}>1 min interval</option>
                      <option value={180}>3 min</option>
                      <option value={300}>5 min</option>
                      <option value={1800}>30 min</option>
                      <option value={3600}>1 hour</option>
                      <option value={18000}>5 hours</option>
                      <option value={36000}>10 hours</option>
                      <option value={54000}>15 hours</option>
                      <option value={64800}>18 hours</option>
                      <option value={86400}>24 hours</option>
                      <option value={172800}>2 days</option>
                      <option value={259200}>3 days</option>
                      <option value={604800}>7 days</option>
                    </select>
                  </div>
                </div>
                : ''}

            </div>
          </div>

        </div>
        <div className="wpnts-switch-updatenotification">

          <div className="parent-section">
            <div className="toogle-section">
              <ReactSwitchsupport uncheckedIcon checkedIcon className="supportSwitch-4" name="wpnts-switch-u-notification" id="updatenotification" onChange={handleUpdatenotification} checked={wpntswebhook_site_settings.updatenotification} 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="updatenotification">Plugin pending update notification:</label>
              <Tippy content="It will send WordPress Plugin update notification based on the given interval.">
                <span className="wcs_title"><HelpOutlineIcon className='wcs_tooltip_icon' /></span>
              </Tippy>
            </div>

            <div className="section-child">
              {wpntswebhook_site_settings.updatenotification ?
                <div className="formInput">
                  <label htmlFor="interval_plugin_update">Time Interval for WP Core & plugin update</label>
                  <div className="wpnts-setting">
                    <select
                      name="interval_plugin_update"
                      required
                      onChange={handleintervalPluginUpdate}
                      value={wpntswebhook_site_settings.interval_plugin_update}
                      className="site-select-fields"
                    >
                      <option value={60}>1 min interval</option>
                      <option value={180}>3 min</option>
                      <option value={300}>5 min</option>
                      <option value={1800}>30 min</option>
                      <option value={3600}>1 hour</option>
                      <option value={18000}>5 hours</option>
                      <option value={36000}>10 hours</option>
                      <option value={54000}>15 hours</option>
                      <option value={64800}>18 hours</option>
                      <option value={86400}>24 hours</option>
                      <option value={172800}>2 days</option>
                      <option value={259200}>3 days</option>
                      <option value={604800}>7 days</option>
                    </select>
                  </div>
                </div>
                : ''}

            </div>
          </div>

        </div>
        <div className="wpnts-switch-loginandout">
          <ReactSwitchsupport uncheckedIcon checkedIcon className="supportSwitch-6" name="wpnts-switch-loginandout-notification" id="loginandout" onChange={handleLoginandout} checked={wpntswebhook_site_settings.loginandout} 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="loginandout">Login/Logout alert:</label>
          <Tippy content="It will send login and logout username after user login or logout.">
            <span className="wcs_title"><HelpOutlineIcon className='wcs_tooltip_icon' /></span>
          </Tippy>
        </div>

        <div className="wpnts-switch-registration">
          <ReactSwitchsupport uncheckedIcon checkedIcon className="supportSwitch-8" name="wpnts-switch-registration-notification" id="registration" onChange={handleRegistration} checked={wpntswebhook_site_settings.registration} 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="registration">New User Registration alert:</label>
          <Tippy content="You will be notified when new user registered on your website.">
            <span className="wcs_title"><HelpOutlineIcon className='wcs_tooltip_icon' /></span>
          </Tippy>

        </div>
        <div className="wpnts-switch-sitehelgth">
          <div className="parent-section">
            <div className="toogle-section">
              <ReactSwitchsupport uncheckedIcon checkedIcon className="supportSwitch-7" name="wpnts-switch-sitehelgth-notification" id="sitehelgth" onChange={handleSitehelgth} checked={wpntswebhook_site_settings.sitehelgth} 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="sitehelgth">Site health notification:</label>
              <Tippy content="You will be informed about the current status of your website">
                <span className="wcs_title"><HelpOutlineIcon className='wcs_tooltip_icon' /></span>
              </Tippy>
            </div>

            <div className="section-child">
              {wpntswebhook_site_settings.sitehelgth ?
                <div className="formInput">
                  <label htmlFor="interval_sitehelgth_update">Time Interval/Second for Site Helght</label>
                  <div className="wpnts-setting">
                    <select
                      name="interval_sitehelgth_update"
                      required
                      onChange={handleSiteHelgthinterval}
                      value={wpntswebhook_site_settings.interval_sitehelgth_update}
                      className="site-select-fields"
                    >
                      <option value={60}>1 min interval</option>
                      <option value={180}>3 min</option>
                      <option value={300}>5 min</option>
                      <option value={1800}>30 min</option>
                      <option value={3600}>1 hour</option>
                      <option value={18000}>5 hours</option>
                      <option value={36000}>10 hours</option>
                      <option value={54000}>15 hours</option>
                      <option value={64800}>18 hours</option>
                      <option value={86400}>24 hours</option>
                      <option value={172800}>2 days</option>
                      <option value={259200}>3 days</option>
                      <option value={604800}>7 days</option>
                    </select>

                  </div>
                </div>
                : ''}

            </div>
          </div>
        </div>


        <div className="wpnts-switch-sitehelgth">
          {!allConditionsMet ? <p className="PRO_TAG">PRO</p> : ''}
          {/* <p className="NEW_TAG">New</p> */}
          <div className={`wpnts_ispro ${allConditionsMet ? '' : 'inactive'}`}>
            <ReactSwitchsupport uncheckedIcon checkedIcon className="supportSwitch-7" name="wpnts-role-modification" id="loginalertwithip" onChange={handleLoginalertwithip} checked={wpntswebhook_site_settings.loginalertwithip} 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="loginalertwithip">Login event with IP location alert:</label>
            <Tippy content="You will be notified when a user's current role changes">
              <span className="wcs_title"><HelpOutlineIcon className='wcs_tooltip_icon' /></span>
            </Tippy>

          </div>
        </div>

        <div className="wpnts-switch-sitehelgth">
          {!allConditionsMet ? <p className="PRO_TAG">PRO</p> : ''}
          {/* <p className="NEW_TAG">New</p> */}
          <div className={`wpnts_ispro ${allConditionsMet ? '' : 'inactive'}`}>
            <ReactSwitchsupport uncheckedIcon checkedIcon className="supportSwitch-7" name="wpnts-role-modification" id="userdeletion" onChange={handleUserdeletion} checked={wpntswebhook_site_settings.userdeletion} 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="userdeletion">User deletion event alert:</label>
            <Tippy content="You will be notified when a user's current role changes">
              <span className="wcs_title"><HelpOutlineIcon className='wcs_tooltip_icon' /></span>
            </Tippy>
          </div>
        </div>

        <div className="wpnts-switch-sitehelgth">
          {!allConditionsMet ? <p className="PRO_TAG">PRO</p> : ''}
          {/* <p className="NEW_TAG">New</p> */}
          <div className={`wpnts_ispro ${allConditionsMet ? '' : 'inactive'}`}>
            <ReactSwitchsupport uncheckedIcon checkedIcon className="supportSwitch-7" name="wpnts-role-modification" id="authenticaltionfailed" onChange={handleAuthenticaltionfailed} checked={wpntswebhook_site_settings.authenticaltionfailed} 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="authenticaltionfailed">Authentication failed alert with IP & Location:</label>
            <Tippy content="It can use block the IP">
              <span className="wcs_title"><HelpOutlineIcon className='wcs_tooltip_icon' /></span>
            </Tippy>

          </div>
        </div>




        <div className="wpnts-switch-sitehelgth">
          {!allConditionsMet ? <p className="PRO_TAG">PRO</p> : ''}
          {/* <p className="NEW_TAG">New</p> */}
          <div className={`wpnts_ispro ${allConditionsMet ? '' : 'inactive'}`}>
            <ReactSwitchsupport uncheckedIcon checkedIcon className="supportSwitch-7" name="wpnts-role-modification" id="siteroleupdate" onChange={handleRoleChangealert} checked={wpntswebhook_site_settings.rolechangenotification} 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="siteroleupdate">User Role change notification:</label>
            <Tippy content="You will be notified when a user's current role changes">
              <span className="wcs_title"><HelpOutlineIcon className='wcs_tooltip_icon' /></span>
            </Tippy>

          </div>
        </div>

        <div className="wpnts-switch-sitehelgth">
          {!allConditionsMet ? <p className="PRO_TAG">PRO</p> : ''}
          {/* <p className="NEW_TAG">New</p> */}
          <div className={`wpnts_ispro ${allConditionsMet ? '' : 'inactive'}`}>
            <ReactSwitchsupport uncheckedIcon checkedIcon className="supportSwitch-7" name="wpnts-pass-reset" id="lostpassreset" onChange={handlelostpassreset} checked={wpntswebhook_site_settings.lostpassreset} 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="lostpassreset">Lost password? Reset notification:</label>
            <Tippy content="You will be notified when a user resets his password through the Forgot Password from website">
              <span className="wcs_title"><HelpOutlineIcon className='wcs_tooltip_icon' /></span>
            </Tippy>

          </div>
        </div>

        <div className="wpnts-switch-sitehelgth">
          {!allConditionsMet ? <p className="PRO_TAG">PRO</p> : ''}
          {/* <p className="NEW_TAG">New</p> */}
          <div className={`wpnts_ispro ${allConditionsMet ? '' : 'inactive'}`}>
            <ReactSwitchsupport uncheckedIcon checkedIcon className="supportSwitch-7" name="wpnts-accountpass-reset" id="accountpasschange" onChange={handleAccountpassreset} checked={wpntswebhook_site_settings.accountpassreset} 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="accountpasschange">User account password change notification:</label>
            <Tippy content="You will be notified if the user changes the password from their account">
              <span className="wcs_title"><HelpOutlineIcon className='wcs_tooltip_icon' /></span>
            </Tippy>

          </div>
        </div>


      </div>
      <div className="acb_right">
        <form action="" id="wpntswebhook_site_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_site_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>

          {/* Mail  */}
          <div className="formInput global-apis">
            <label htmlFor="authorPaneltoMail">Notification send to Mail</label>
            <div className="wpnts-setting global-settings-checkbox authorpanelmailclass">
              <input type="checkbox" id="authorPaneltoMail" name="authorPaneltoMail" onChange={handleAuthorPaneltoMail} checked={wpntswebhook_site_settings.authorPaneltoMail} />
              <label htmlFor="authorPaneltoMail">Check to receive notification to Mail</label>
            </div>
          </div>
          {/* END  */}

          {wpntswebhook_site_settings.updatenotification || wpntswebhook_site_settings.sitehelgth ?
            <div className="formInput">
              <label htmlFor="intervalDays">Add any days to send update notification [ optionals ] </label>
              <div className="wpnts-setting">
                <select
                  name="intervalDays"
                  required
                  onChange={handleIntervalDays}
                  value={wpntswebhook_site_settings.intervalDays}
                  className="site-select-fields"
                >
                  <option value={-1}>Single Days</option>
                  <option value={-7}> 1 Week</option>
                </select>
              </div>
            </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 Site