import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { noticePost } from '../api/ajax';
import { getNotices } from '../Helpers';
import { useNotices } from '../contexts/NoticesContext';
import Modal from './Modal';

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

/**
 * "We’ve updated our Apps Script" banner (port of templates/dashboard/appscript.php, which the Multi-Store add-on still loads).
 *
 * Uses its own class names for the two actions: public/js/notice.js is still enqueued and binds
 * document-wide click handlers to `.ssgsw_remove_text_dec` / `.ssgsw_dismiss_notice`.
 */
const AppsScriptNotice = () => {
	const notices = useNotices();
	const [ visible, setVisible ] = useState( !! getNotices().apps_script );
	const [ confirming, setConfirming ] = useState( false );
	const [ busy, setBusy ] = useState( null );

	if ( ! visible ) {
		return null;
	}

	// Sends the wizard back to the Apps Script step, then opens it (server returns the URL).
	const setupNow = async () => {
		if ( busy ) {
			return;
		}
		setBusy( 'setup' );
		try {
			const response = await noticePost( 'sssgw_appscript_improved' );
			if ( response.url ) {
				window.location.href = response.url;
				return;
			}
		} catch ( error ) {
			notices.error( __( 'FlexStock: Something went wrong', TEXT_DOMAIN ) );
		}
		setBusy( null );
	};

	const dismiss = async () => {
		if ( busy ) {
			return;
		}
		setBusy( 'dismiss' );
		try {
			await noticePost( 'sssgw_already_updated' );
			setConfirming( false );
			setVisible( false );
		} catch ( error ) {
			notices.error( __( 'FlexStock: Something went wrong', TEXT_DOMAIN ) );
		}
		setBusy( null );
	};

	return (
		<>
			<div className="ssgsw_appscript_trigger ssgsw_appscript_notice233 ssgsw-react-appscript-notice" role="region" aria-label={ __( 'Apps Script update', TEXT_DOMAIN ) }>
				<div className="ssgsw_notice_container">
					<p>
						{ __( 'Hey! 👋 We’ve updated our Apps Script Please', TEXT_DOMAIN ) }{ ' ' }
						<strong className="ssgsw_extra_strong">{ __( 'update your Apps Script', TEXT_DOMAIN ) }</strong>{ ' ' }
						{ __( 'on Google sheets ', TEXT_DOMAIN ) } { __( 'to enjoy all the new changes.', TEXT_DOMAIN ) }{ ' ' }
						<button type="button" className="osgsw_remove_text_dec23 ssgsw-react-notice-link" onClick={ setupNow } aria-busy={ busy === 'setup' }>
							{ busy === 'setup' ? 'Waiting....' : __( 'Setup Now →', TEXT_DOMAIN ) }
						</button>
					</p>
				</div>
				<div className="ssgsw_notice_container2">
					<button
						type="button"
						className="dashicons dashicons-dismiss osgsw_notice_off ssgsw-react-icon-button"
						onClick={ () => setConfirming( true ) }
						aria-label={ __( 'Dismiss notice', TEXT_DOMAIN ) }
					></button>
				</div>
			</div>

			{ confirming && (
				<Modal
					onClose={ () => setConfirming( false ) }
					renderTitle={ ( id ) => (
						<div className="profile-section">
							<div className="profile-details">
								<h3 id={ id } className="ossgw_profile-title2">
									{ __( 'Are you sure to close?', TEXT_DOMAIN ) }
								</h3>
								<p className="ossgw_extra_class2">
									{ __( 'Please make sure that you have updated the Apps Script. Otherwise the plugin functionality may not work properly.', TEXT_DOMAIN ) }
								</p>
							</div>
						</div>
					) }
				>
					<div className="ssgs_first_section">
						<div className="osgs_button_section">
							<button type="button" className="osgsw_save_changes231 button" onClick={ () => setConfirming( false ) }>
								{ __( ' Later', TEXT_DOMAIN ) }
							</button>
							<button type="button" className="button ssgsw-react-primary-button" onClick={ dismiss } aria-busy={ busy === 'dismiss' }>
								{ busy === 'dismiss' ? 'Waiting...' : __( 'Confirm & close', TEXT_DOMAIN ) }
							</button>
						</div>
					</div>
				</Modal>
			) }
		</>
	);
};

export default AppsScriptNotice;