import analytics from '@automattic/jetpack-analytics';
import { __ } from '@wordpress/i18n';
import classNames from 'classnames';
import Card from 'components/card';
import CompactFormToggle from 'components/form-toggle/compact';
import React, { useCallback } from 'react';
import 'scss/rna-styles.scss';
import './style.scss';
const SEARCH_DESCRIPTION = __(
'Earn income by allowing Jetpack to display high quality ads.',
'jetpack-wordads'
);
/**
* Search settings component to be used within the Performance section.
*
* @param {object} props - Component properties.
* @param {Function} props.updateOptions - function to update settings.
* @param {boolean} props.isSavingOptions - true if Saving options.
* @param {boolean} props.isModuleEnabled - true if WordAds module is enabled.
* @param {boolean} props.isTogglingModule - true if toggling WordAds module.
* @returns {React.Component} Search settings component.
*/
export default function WordAdsModuleControl( {
updateOptions,
isSavingOptions,
isModuleEnabled,
isTogglingModule,
} ) {
const toggleSearchModule = useCallback( () => {
const newOption = {
module_active: ! isModuleEnabled,
};
updateOptions( newOption );
analytics.tracks.recordEvent( 'jetpack_wordads_module_toggle', newOption );
}, [ isModuleEnabled, updateOptions ] );
const renderSearchToggle = () => {
return (
<div className="jp-form-wordads-settings-group__toggle is-search jp-wordads-dashboard-wrap">
<div className="jp-wordads-dashboard-row">
<div className="lg-col-span-2 md-col-span-1 sm-col-span-0"></div>
<CompactFormToggle
checked={ isModuleEnabled }
disabled={ isSavingOptions }
onChange={ toggleSearchModule }
toggling={ isTogglingModule }
className="is-wordads-admin"
switchClassNames="lg-col-span-1 md-col-span-1 sm-col-span-1"
labelClassNames=" lg-col-span-7 md-col-span-5 sm-col-span-3"
aria-label={ __( 'Enable WordAds', 'jetpack-wordads' ) }
>
{ __( 'Enable WordAds', 'jetpack-wordads' ) }
</CompactFormToggle>
<div className="lg-col-span-2 md-col-span-1 sm-col-span-0"></div>
</div>
<div className="jp-wordads-dashboard-row">
<div className="lg-col-span-3 md-col-span-2 sm-col-span-1"></div>
<div className="jp-form-wordads-settings-group__toggle-description lg-col-span-7 md-col-span-5 sm-col-span-3">
<p className="jp-form-wordads-settings-group__toggle-explanation">
{ SEARCH_DESCRIPTION }
</p>
</div>
<div className="lg-col-span-2 md-col-span-1 sm-col-span-0"></div>
</div>
</div>
);
};
return (
<div className="jp-form-settings-group jp-form-wordads-settings-group">
<Card
className={ classNames( {
'jp-form-has-child': true,
'jp-form-settings-disable': false,
} ) }
>
<div className="jp-form-wordads-settings-group-inside">{ renderSearchToggle() }</div>
</Card>
</div>
);
}