import { __ } from '@wordpress/i18n';
import { useNotices } from '../../contexts/NoticesContext';
import { getAppsScript, getConfig, getPublicUrl } from '../../Helpers';
import HelpTooltip from '../../components/HelpTooltip';
import VideoPlayer from '../../components/VideoPlayer';
import CopyField, { copyToClipboard } from '../../components/CopyField';
import Pane, { animationClass } from './Pane';

const TEXT_DOMAIN = 'stock-sync-with-google-sheet-for-woocommerce';

/**
 * Apps Script with the site placeholders filled in, exactly as the legacy copyAppsScript():
 * String#replace with string patterns (first occurrence only), raw localized values, whitespace collapsed.
 *
 * @param {Object} options Current plugin options (token, sheet_tab).
 * @return {string} Script ready to paste into the sheet.
 */
export const buildAppsScript = ( options ) => {
	const config = getConfig();
	let script = getAppsScript();

	script = script.replace( '{site_url}', config.site_url );
	script = script.replace( '{token}', options.token );
	script = script.replace( '{sheet_tab}', options.sheet_tab );
	script = script.replace( '{token_id}', config.token_id );
	script = script.replace( '{vendor_request}', config.vendor_request );

	return script.replace( /\s+/g, ' ' );
};

// Step 4: place the Apps Script (screen 1) and add its trigger (screen 2). Port of step-4.php.
const Step4AppsScript = ( {
	isFirstScreen,
	direction,
	options,
	pastedScript,
	onPastedScriptChange,
	triggeredScript,
	onTriggeredScriptChange,
} ) => {
	const notices = useNotices();
	const animation = animationClass( direction );
	const tooltip = ( file ) => `${ getPublicUrl() }/images/tooltip/${ file }`;

	const copyScript = async () => {
		const copied = await copyToClipboard( buildAppsScript( options ) );
		if ( copied ) {
			notices.success( __( 'FlexStock: Copied to clipboard', TEXT_DOMAIN ) );
		}
		return copied;
	};

	return (
		<Pane direction={ direction }>
			{ isFirstScreen ? (
				<div className={ `place-code active${ animation }` }>
					<div className="entry-title text-center">
						<h3 className="title">
							{ __( 'Add Script Code on Editor', TEXT_DOMAIN ) }{ ' ' }
							<HelpTooltip position="bottom left" image={ tooltip( 'step4_copy-paste-appScript.png' ) } />
						</h3>
					</div>

					<CopyField
						id="clipboard-input-code"
						className="medium"
						value={ __( '**This is your Apps Script code. Click to copy and paste accordingly...', TEXT_DOMAIN ) }
						label={ __( 'Apps Script code', TEXT_DOMAIN ) }
						buttonLabel={ __( 'Copy code', TEXT_DOMAIN ) }
						copiedText={ __( 'Copied to clipboard', TEXT_DOMAIN ) }
						onCopy={ copyScript }
					/>

					<div className="ssgs-row align-items-center">
						<div className="ssgs-column">
							<div className="content">
								<ol>
									<li>
										{ __( 'Copy the Script Code from the box', TEXT_DOMAIN ) }{ ' ' }
										<HelpTooltip image={ tooltip( 'step4_copy-code.png' ) } />
									</li>
									<li>
										{ __( 'Go to your Google Sheet and click on the', TEXT_DOMAIN ) }{ ' ' }
										<span className="ssgs-badge gray">{ __( 'Extension', TEXT_DOMAIN ) }</span> { __( 'menu', TEXT_DOMAIN ) }{ ' ' }
										<HelpTooltip image={ tooltip( 'step4_extention.png' ) } />
									</li>
									<li>
										{ __( 'Click on', TEXT_DOMAIN ) } <i className="ssgs-script" aria-hidden="true"></i> { __( 'Apps Script', TEXT_DOMAIN ) }{ ' ' }
										<HelpTooltip position="bottom" image={ tooltip( 'step4_appscript.png' ) } />
									</li>
									<li>
										{ __( 'Now remove the existing code and paste the Script Code here', TEXT_DOMAIN ) }{ ' ' }
										<HelpTooltip position="right" image={ tooltip( 'step4_copy-paste-appScript.png' ) } />
									</li>
									<li>
										{ __( 'Finally, don’t forget to', TEXT_DOMAIN ) } <strong>save</strong> { __( 'the code. Then click on', TEXT_DOMAIN ) }{ ' ' }
										<span className="ssgs-badge gray">
											<i className="ssgs-run" aria-hidden="true"></i> { __( 'Run', TEXT_DOMAIN ) }
										</span>{ ' ' }
										{ __( 'button', TEXT_DOMAIN ) } <HelpTooltip position="right" image={ tooltip( 'step4_save-and-run.png' ) } />
									</li>
									<li>
										{ __(
											'If you are doing it for the first time, a popup will appear asking your permission. Make sure popups are not blocked in your browser.',
											TEXT_DOMAIN
										) }{ ' ' }
										<span className="ssgsw-strong">{ __( 'Watch the video for details', TEXT_DOMAIN ) } 👉</span>
									</li>
								</ol>
							</div>
						</div>

						<div className="ssgs-column">
							<VideoPlayer
								title={ __( 'How to add Apps Script?', TEXT_DOMAIN ) }
								duration={ __( '0:55', TEXT_DOMAIN ) }
								videoId="KpKzI47XuIk"
								thumbnail={ `${ getPublicUrl() }/images/thumbnails/apps-script.png` }
							/>
						</div>
					</div>

					<div className="form-group">
						<label htmlFor="place_code">
							<input
								type="checkbox"
								name="place_code"
								id="place_code"
								checked={ pastedScript }
								onChange={ ( event ) => onPastedScriptChange( event.target.checked ) }
							/>
							{ __( "I've placed the code and clicked on", TEXT_DOMAIN ) }{ ' ' }
							<span className="ssgs-badge gray">
								<i className="ssgs-run" aria-hidden="true"></i> { __( 'Run', TEXT_DOMAIN ) }
							</span>{ ' ' }
							{ __( 'button', TEXT_DOMAIN ) }
						</label>
					</div>
				</div>
			) : (
				<div className={ `trigger-permissions active${ animation }` }>
					<div className="entry-title text-center">
						<h3 className="title">
							{ __( 'Add Trigger', TEXT_DOMAIN ) } <HelpTooltip position="bottom" image={ tooltip( 'step4_Add-Trigger.png' ) } />
						</h3>
					</div>

					<div className="ssgs-row align-items-center">
						<div className="ssgs-column">
							<div className="content">
								<ol>
									<li>
										{ __( 'Go to', TEXT_DOMAIN ) }{ ' ' }
										<span className="ssgs-badge gray">
											<i className="ssgs-clock" aria-hidden="true"></i> { __( 'Triggers', TEXT_DOMAIN ) }
										</span>{ ' ' }
										{ __( 'menu', TEXT_DOMAIN ) } <HelpTooltip position="bottom" image={ tooltip( 'step4_trigger-menu.png' ) } />
									</li>
									<li>
										{ __( 'Click on', TEXT_DOMAIN ) } <span className="ssgs-badge round">{ __( '+ Add Trigger ', TEXT_DOMAIN ) }</span>
										{ __( ' button', TEXT_DOMAIN ) } <HelpTooltip position="bottom" image={ tooltip( 'step4_Add-Trigger.png' ) } />
									</li>
									<li>
										{ __( 'Find the', TEXT_DOMAIN ) } <span className="ssgs-badge gray">{ __( 'Choose which function to run', TEXT_DOMAIN ) }</span>{ ' ' }
										{ __( 'dropdown menu, and select', TEXT_DOMAIN ) } <span className="ssgs-badge gray">{ __( 'onEdit', TEXT_DOMAIN ) }</span>{ ' ' }
										{ __( 'option', TEXT_DOMAIN ) } <HelpTooltip position="bottom" image={ tooltip( 'step4_onEdit.png' ) } />
									</li>
									<li>
										{ __( 'Find the', TEXT_DOMAIN ) } <span className="ssgs-badge gray">{ __( 'Select event type', TEXT_DOMAIN ) }</span>{ ' ' }
										{ __( 'dropdown menu, and select', TEXT_DOMAIN ) } <span className="ssgs-badge gray">{ __( 'On edit', TEXT_DOMAIN ) }</span>{ ' ' }
										{ __( 'option', TEXT_DOMAIN ) } <HelpTooltip position="right" image={ tooltip( 'step4_On-edit.png' ) } />
									</li>
									<li>
										{ __( 'Click', TEXT_DOMAIN ) } <strong>{ __( 'Save button.', TEXT_DOMAIN ) }</strong>{ ' ' }
										<HelpTooltip position="right" image={ tooltip( 'step4_save.png' ) } />
									</li>
								</ol>
							</div>
						</div>

						<div className="ssgs-column">
							<VideoPlayer
								title={ __( 'How to add Trigger?', TEXT_DOMAIN ) }
								duration={ __( '0:47', TEXT_DOMAIN ) }
								videoId="ePUBBMO5X0k"
								thumbnail={ `${ getPublicUrl() }/images/thumbnails/apps-script-trigger.png` }
							/>
						</div>
					</div>

					<div className="form-group">
						<label htmlFor="trigger_permissions">
							<input
								type="checkbox"
								name="trigger_permissions"
								id="trigger_permissions"
								checked={ triggeredScript }
								onChange={ ( event ) => onTriggeredScriptChange( event.target.checked ) }
							/>
							{ __( 'I’ve added the trigger and gave permissions', TEXT_DOMAIN ) }
						</label>
					</div>
				</div>
			) }
		</Pane>
	);
};

export default Step4AppsScript;