import { __ } from '@wordpress/i18n';

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

const STEPS = [
	__( 'Set Credentials', TEXT_DOMAIN ),
	__( 'Set URL', TEXT_DOMAIN ),
	__( 'Set ID', TEXT_DOMAIN ),
	__( 'Configure Apps Script', TEXT_DOMAIN ),
	__( 'Done', TEXT_DOMAIN ),
];

// Port of the removed templates/setup/header.php. Steps ahead of the current one stay disabled.
const StepHeader = ( { currentStep, onSelect } ) => (
	<div className="ssgs-tab__nav text-center">
		<ul className="ssgs-tab__nav-tab" aria-label={ __( 'Setup steps', TEXT_DOMAIN ) }>
			{ STEPS.map( ( label, index ) => {
				const step = index + 1;
				const isActive = step === currentStep;
				const isDisabled = currentStep <= index;

				return (
					<li key={ label } className={ `step${ isActive ? ' active' : '' }${ isDisabled ? ' disabled' : '' }` }>
						<a
							href={ `#step-${ step }` }
							aria-current={ isActive ? 'step' : undefined }
							aria-disabled={ isDisabled || undefined }
							onClick={ ( event ) => {
								event.preventDefault();
								if ( ! isDisabled ) {
									onSelect( step );
								}
							} }
						>
							{ label }
						</a>
					</li>
				);
			} ) }
		</ul>
	</div>
);

export default StepHeader;