import { __ } from '@wordpress/i18n';
import { getPublicUrl } from '../../Helpers';
import HelpTooltip from '../../components/HelpTooltip';
import Pane from './Pane';

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

// Step 2: spreadsheet URL and sheet tab name (port of step-2.php).
const Step2SheetUrl = ( { direction, values, onChange, urlInvalid } ) => (
	<Pane direction={ direction }>
		<div className="form-group">
			<label htmlFor="google_sheet_url" className="title title-secondary">
				{ __( 'Add Google Sheet URL', TEXT_DOMAIN ) }{ ' ' }
				<HelpTooltip position="bottom" image={ `${ getPublicUrl() }/images/tooltip/step2_add-google-sheet-url.png` } />
			</label>
			<p className="description" id="google_sheet_url_help">
				{ __( 'Copy the URL of your Google Sheet and paste it here. So that, our system can add all your WooCommerce Products into it.', TEXT_DOMAIN ) }
			</p>
			<input
				type="url"
				id="google_sheet_url"
				className="ssgs-input"
				placeholder={ __( 'Enter your google sheet URL', TEXT_DOMAIN ) }
				value={ values.spreadsheet_url }
				onChange={ ( event ) => onChange( 'spreadsheet_url', event.target.value ) }
				aria-describedby={ urlInvalid ? 'google_sheet_url_help google_sheet_url_error' : 'google_sheet_url_help' }
				aria-invalid={ urlInvalid || undefined }
			/>
			{ urlInvalid && (
				<p className="ssgsw-field-error" id="google_sheet_url_error">
					{ __( 'Use the full Google Sheet link, for example https://docs.google.com/spreadsheets/d/…/edit', TEXT_DOMAIN ) }
				</p>
			) }
		</div>

		<div className="form-group">
			<label htmlFor="google_sheet_name" className="title title-secondary">
				{ __( 'Enter sheet tab name', TEXT_DOMAIN ) }{ ' ' }
				<HelpTooltip image={ `${ getPublicUrl() }/images/tooltip/step2_enter-sheet-tab-name.png` } />
			</label>
			<p className="description" id="google_sheet_name_help">
				{ __( 'Copy the sheet tab name (ex: Sheet1) from your Google Sheet and paste it here. So that, our system can add your WooCommerce products to the spreadsheet.', TEXT_DOMAIN ) }
			</p>
			<input
				type="text"
				id="google_sheet_name"
				className="ssgs-input"
				placeholder={ __( 'Enter your google sheet Name', TEXT_DOMAIN ) }
				value={ values.sheet_tab }
				onChange={ ( event ) => onChange( 'sheet_tab', event.target.value ) }
				aria-describedby="google_sheet_name_help"
			/>
		</div>
	</Pane>
);

export default Step2SheetUrl;