import { __ } from '@wordpress/i18n';
import ICONS from '../../../../../icons';
import ToggleSwitch from '../../../../components/toggle-switch';
import Tooltip from '../../../../components/tooltip';
import { useEffect, useRef, useState } from 'react';

const TrackingOption = () => {
	const [ isOpen, setIsOpen ] = useState( false );
	const [ bsfUsageTracking, setBSFUsageTracking ] = useState(
		!! starterTemplates?.bsfUsageTracking
	);
	const [ response, setResponse ] = useState( {} );

	const wrapperRef = useRef( null );

	const updateBSFUsageTracking = () => {
		setBSFUsageTracking( ! bsfUsageTracking );

		// Send an API request to enable/disable the usage analytics.
		const formData = new FormData();
		formData.append( 'action', 'bsf_analytics_optin_status' );
		formData.append( '_ajax_nonce', astraSitesVars?._ajax_nonce );
		formData.append( 'bsfUsageTracking', ! bsfUsageTracking );
		fetch( astraSitesVars?.ajaxurl, {
			method: 'POST',
			body: formData,
		} )
			.then( ( res ) => res.json() )
			.then( ( res ) => {
				if ( res.success ) {
					starterTemplates.bsfUsageTracking = ! bsfUsageTracking;
				} else {
					// Revert the optimistic UI change if backend rejected the request.
					setBSFUsageTracking( bsfUsageTracking );
					setResponse( { isError: true, message: res?.data } );
				}
			} )
			.catch( ( error ) => {
				// Revert the optimistic UI change on error.
				setBSFUsageTracking( bsfUsageTracking );

				/* eslint-disable-next-line no-console -- We are displaying errors in the console. */
				console.error( error );
				setResponse( { isError: true, message: error?.message } );
			} );
	};

	useEffect( () => {
		const handleClickOutside = ( event ) => {
			if (
				wrapperRef.current &&
				! wrapperRef.current.contains( event.target )
			) {
				setIsOpen( false );
			}
		};

		document.addEventListener( 'mousedown', handleClickOutside );
		return () => {
			document.removeEventListener( 'mousedown', handleClickOutside );
		};
	}, [] );

	return (
		<div id="st-options" className="relative" ref={ wrapperRef }>
			<Tooltip content={ __( 'Usage Tracking', 'astra-sites' ) }>
				<button
					className="inline-flex mx-1 mb-1 p-3 bg-transparent border-none cursor-pointer"
					onClick={ () => setIsOpen( ! isOpen ) }
				>
					{ ICONS.options }
				</button>
			</Tooltip>

			{ isOpen && (
				<div
					id="st-options-popup-wrapper"
					className="fixed top-[57px] right-3 w-[min(calc(100%-24px),384px)] flex gap-3 p-2.5 bg-white border border-solid border-[#E6E6EF] rounded-md z-10 md:top-[78px]"
					style={ {
						boxShadow: '0 10px 32px -12px #95A0B266',
					} }
				>
					<div className="relative top-0.5">
						<ToggleSwitch
							onChange={ updateBSFUsageTracking }
							value={ bsfUsageTracking }
							requiredClass={
								bsfUsageTracking
									? 'bg-accent-st-secondary'
									: 'bg-border-tertiary'
							}
						/>
					</div>

					<div className="flex flex-col gap-1">
						{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
						<h6
							className="cursor-pointer"
							onClick={ updateBSFUsageTracking }
						>
							{ __( 'Enable Usage Tracking', 'astra-sites' ) }
						</h6>

						<p className="!text-xs">
							{ __(
								'Allow Starter Templates and our other products to track non-sensitive usage tracking data.',
								'astra-sites'
							) }{ ' ' }
							<a
								className="!inline !text-xs !underline"
								href="https://store.brainstormforce.com/usage-tracking/?utm_source=st_header&utm_medium=st_dashboard&utm_campaign=usage_tracking"
								rel="noopener noreferrer"
								target="_blank"
							>
								{ __( 'Learn More', 'astra-sites' ) }
							</a>
						</p>

						{ response?.message && (
							<p
								className={ `!text-xs ${
									response?.isError
										? '!text-red-600'
										: '!text-green-600'
								}` }
							>
								{ response?.message }
							</p>
						) }
					</div>
				</div>
			) }
		</div>
	);
};

export default TrackingOption;
@keyframes ai1wmFadeIn{0%{opacity:0}to{opacity:1}}.ai1wm-schedules-container{align-items:stretch;background:transparent;display:flex;flex-direction:column;justify-content:center;padding:20px 0 20px 20px}.ai1wm-schedules-container header{align-items:center;background:#f8ebff;border:2px solid #fff;border-radius:5px;display:flex;justify-content:space-between;margin-bottom:20px;width:100%}.ai1wm-schedules-container header .ai1wm-schedules-subtitle{color:#a06ab4}.ai1wm-schedules-container header>div{padding:10px 20px}.ai1wm-schedules-container header>div a{align-items:center;background:linear-gradient(-180deg,#ed5eaa,#6060ef);color:#fff;display:flex;justify-content:center;padding:2px;text-decoration:none}.ai1wm-schedules-container header>div a>span{background-color:#121217;padding:10px;text-align:center;width:100%}.ai1wm-schedules-container .ai1wm-schedules-content{background:#fff;border:2px solid #fff;border-radius:5px;display:flex;flex-direction:row;padding:20px}.ai1wm-schedules-container .ai1wm-schedules-content aside{width:200px}.ai1wm-schedules-container .ai1wm-schedules-content aside nav{display:flex;flex-direction:column;gap:10px;margin-left:20px;margin-top:1rem}.ai1wm-schedules-container .ai1wm-schedules-content aside nav a{border:2px solid transparent;box-shadow:none;color:#121217;padding:5px 10px;text-decoration:none}.ai1wm-schedules-container .ai1wm-schedules-content aside nav a.active,.ai1wm-schedules-container .ai1wm-schedules-content aside nav a:hover{background:#f8ebff;border-color:#f8ebff #a06ab4 #f8ebff #f8ebff;cursor:pointer}.ai1wm-schedules-container .ai1wm-schedules-content section{border-right:1px solid #efeff5;display:flex;flex:1;flex-direction:column;padding:0 20px}.ai1wm-schedules-container .ai1wm-schedules-content section article>a,.ai1wm-schedules-container .ai1wm-schedules-content section article>div{display:none;opacity:0}.ai1wm-schedules-container .ai1wm-schedules-content section article>div.active{animation:ai1wmFadeIn .25s linear forwards;display:block}.ai1wm-schedules-container .ai1wm-schedules-content section article>div.active h2{font-size:1.2em;font-weight:700}.ai1wm-schedules-container .ai1wm-schedules-content section article>div.active h2 a{border-right:1px solid #121217;display:inline-block;font-size:.8em;margin-right:10px;padding:5px 10px 5px 5px}.ai1wm-schedules-container .ai1wm-schedules-content section article>div.active img{max-width:100%;width:621px}@media (max-width:767px){.ai1wm-schedules-container{margin-left:10px}.ai1wm-schedules-container header{flex-direction:column}.ai1wm-schedules-container header h1{line-height:1.2}.ai1wm-schedules-container header>div.ai1wm-button-link{margin-top:0;width:100%}.ai1wm-schedules-container header>div.ai1wm-button-link a{margin:0 20px}.ai1wm-schedules-container .ai1wm-schedules-content{background:transparent;border:none;flex-direction:column;padding:0}.ai1wm-schedules-container .ai1wm-schedules-content aside{display:none}.ai1wm-schedules-container .ai1wm-schedules-content section{background:transparent;padding:0}.ai1wm-schedules-container .ai1wm-schedules-content section article{background:#fff;border:2px solid #fff;border-radius:5px;margin-bottom:30px}.ai1wm-schedules-container .ai1wm-schedules-content section article:last-of-type{margin-bottom:0}.ai1wm-schedules-container .ai1wm-schedules-content section article>a{color:#121217;display:block;font-weight:700;opacity:1;padding:10px 20px 10px 40px;position:relative;text-decoration:none}.ai1wm-schedules-container .ai1wm-schedules-content section article>a:focus{box-shadow:none}.ai1wm-schedules-container .ai1wm-schedules-content section article>a>span{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAAXNSR0IArs4c6QAAAdpJREFUWEft1ruKFUEQgOFvE2+7iZj7ABooCEYKigbe8AkMTcx0QdfEu4kXVAwMBDMT8cbKYqKhL2Bm7HMoSsERxnHO9HRPr3BgOpyprv7nr+ruWbIgY2lBOE2gtSs1GZ2M1jZQO9/Uo//L6C48xV48w/PaC7fybcU9HMN73MLPZkxX6XfiEw40Am/g9ibBbsFrnG3kf4Vz+PHnWRt0BV+wrwPqGu5Whg2Tb3G6I+8LnJ8HehGPe2Cu404l2IB8h1M9+fbja7xvG70w68k+lhptsG0GebJnoV/Yg29doPGVn3EoYe3mrOFL5AZkbJgTickPcGVe6eP5MjZwJJEodunVTNIQ8QZnEvOe4FJq128WbDFkV+mbHzHU7H2sJQz17e7m1H9M9pW+BPavfmpBb8cHHM8t95DS14KtApkqfQnsQ1yeTdyB9bEmh5a+FDbO2ih33N19Y25Ptifl/ubFFfsRhxMA37E7ERM34OrQ4y0XNPJGSeOcPTp0kY64wSZLSt9cbwxsNmTOZuqSVwJbBDkWNLcNiiFrgA6FHQVZCzQFOxqyJug82CqQtUEjX5yzj3AQLxE3VZVRco5WWTg3yQSaaywVPxlNGcp9PxnNNZaKn4ymDOW+XxijvwFnZkorasbgRwAAAABJRU5ErkJggg==") 50% no-repeat;background-size:contain;height:18px;margin-left:20px;position:absolute;left:0;width:18px}.ai1wm-schedules-container .ai1wm-schedules-content section article>a.active{border-bottom:1px solid #efeff5;cursor:default}.ai1wm-schedules-container .ai1wm-schedules-content section article>a.active>span{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAAXNSR0IArs4c6QAAAclJREFUWEft2LtKxEAUxvH/Nl7QRux9AC0sxE5BxMIb+AR2Nlaihdp4t/AGaqOF2FmIeEdstPQJbOx9DkU5kECI2cxJ5iwYmLQ5M/ubLzMnS2pU5KpVxEmAWj+pkGhI1DoB6/nCHv3vibYDR0A/cAHsW4EtH30b8AQMJXCCnrfAWkGzkLHPBGsBzUOaYX2hGqQJ1gdaBOmNLQstg/TCloH6IEtji0KlTz4Dg46W8wl0OWoOgQVt6yoC1SZ5AKwBD8CIAyKtS7A/LrAWqkXKm2gx+tFW4NEKq4GWQcYBmWFdUC1yD1iq8/iagRtgwmcb5EEtkLHNG1sPqkXuAsuugxDdF+w1MFkm2SxoI5CxrSnaBoWxaais+hUYcKx6HdhQJpkuawHugFHH+GQH+fMBYhY4cUwgPXKzJDIeJthbYCxnHumtPcCH1KQTnYv+odcbvwpseSKTB0yw4znz9QLvWVB5Rb4BUpC+VoBtI6SmG5wDM3Fh1mHqAF6AvgTKMsn0WuWAXQFTiRuXwDTwlQeVe53AMdANnAJnxkmmp5NDvAMMA/fRGfhOFrneTA326acPUH1WusqQqC4nfVVIVJ+VrjIkqstJX1WZRH8Bl6RRK7iiYaMAAAAASUVORK5CYII=")}.ai1wm-schedules-container .ai1wm-schedules-content section article>div.active{padding:20px}.ai1wm-schedules-container .ai1wm-schedules-content section article>div.active h2{font-size:1.1em}}