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

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

// Step 3: share the sheet with the service account (port of step-3.php).
const Step3EditorAccess = ( { direction, clientEmail, editorAccess, onEditorAccessChange } ) => {
	const notices = useNotices();
	const tooltip = ( file ) => `${ getPublicUrl() }/images/tooltip/${ file }`;

	const copyEmail = async () => {
		if ( ! clientEmail ) {
			return false;
		}
		const copied = await copyToClipboard( clientEmail );
		if ( copied ) {
			notices.success( __( 'FlexStock: Copied to clipboard', TEXT_DOMAIN ) );
		}
		return copied;
	};

	return (
		<Pane direction={ direction }>
			<div className="access-email-id">
				<div className="entry-title text-center">
					<h3 className="title">
						{ __( 'Give', TEXT_DOMAIN ) } <span className="ssgs-badge gray">{ __( 'Editor', TEXT_DOMAIN ) }</span>{ ' ' }
						{ __( 'access to the following ID', TEXT_DOMAIN ) }{ ' ' }
						<HelpTooltip position="bottom left" image={ tooltip( 'step3_Editor-access-to-emial-ID.png' ) } />
					</h3>
				</div>

				<CopyField
					id="clipboard-input-id"
					value={ clientEmail }
					label={ __( 'Service account email', TEXT_DOMAIN ) }
					buttonLabel={ __( 'Copy', TEXT_DOMAIN ) }
					copiedText={ __( 'Copied to Clipboard', TEXT_DOMAIN ) }
					onCopy={ copyEmail }
				/>

				<div className="ssgs-row align-items-center">
					<div className="ssgs-column">
						<div className="content">
							<ol>
								<li>
									{ __( 'Copy the email ID from the box', TEXT_DOMAIN ) }{ ' ' }
									<HelpTooltip image={ tooltip( 'step3_copy-email-ID.png' ) } />
								</li>
								<li>
									{ __( 'Go to your Google Sheet & click', TEXT_DOMAIN ) }{ ' ' }
									<span className="ssgs-badge green">
										<i className="ssgs-link-share" aria-hidden="true"></i> { __( 'Share', TEXT_DOMAIN ) }
									</span>{ ' ' }
									{ __( 'button at the top-right position', TEXT_DOMAIN ) }{ ' ' }
									<HelpTooltip position="right" image={ tooltip( 'step3_click-on-share-button.png' ) } />
								</li>
								<li>
									{ __( 'Paste the Email ID that you copied and give', TEXT_DOMAIN ) }{ ' ' }
									<span className="ssgs-badge gray">{ __( 'Editor', TEXT_DOMAIN ) }</span> { __( 'access', TEXT_DOMAIN ) }{ ' ' }
									<HelpTooltip image={ tooltip( 'step3_Editor-access-to-emial-ID.png' ) } />
								</li>
								<li>
									{ __( 'Then, click the', TEXT_DOMAIN ) } <span className="ssgs-badge">{ __( 'Send', TEXT_DOMAIN ) }</span>{ ' ' }
									{ __( 'or', TEXT_DOMAIN ) }{ ' ' }
									<span className="ssgs-badge ssgsw-badge-flush">{ __( 'Share', TEXT_DOMAIN ) }</span>{ ' ' }
									{ __( 'button to confirm', TEXT_DOMAIN ) } <HelpTooltip image={ tooltip( 'step3_click-share-button.png' ) } />
								</li>
							</ol>
						</div>
					</div>

					<div className="ssgs-column">
						<VideoPlayer
							title={ __( 'How to set editor access?', TEXT_DOMAIN ) }
							duration={ __( '0:36', TEXT_DOMAIN ) }
							videoId="bUL4tJFc7kY"
							thumbnail={ `${ getPublicUrl() }/images/thumbnails/editor-access.png` }
						/>
					</div>
				</div>

				<div className="form-group">
					<label htmlFor="access_email_id">
						<input
							type="checkbox"
							name="access_email_id"
							id="access_email_id"
							checked={ editorAccess }
							onChange={ ( event ) => onEditorAccessChange( event.target.checked ) }
						/>
						{ __( "I've given", TEXT_DOMAIN ) } <span className="ssgs-badge gray">{ __( 'Editor', TEXT_DOMAIN ) }</span>{ ' ' }
						{ __( 'access to this email ID', TEXT_DOMAIN ) }
					</label>
				</div>
			</div>
		</Pane>
	);
};

export default Step3EditorAccess;