import { useEffect, useRef, useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { getPublicUrl } from '../Helpers';

const TEXT_DOMAIN = 'stock-sync-with-google-sheet-for-woocommerce';
const SUPPORT_EMAIL = 'support@wppool.dev';
const ENCODED_EMAIL = encodeURIComponent( SUPPORT_EMAIL );

const CHANNELS = [
	{
		href: `https://mail.google.com/mail/?view=cm&to=${ ENCODED_EMAIL }`,
		image: 'gmail.svg',
		title: __( 'Gmail', TEXT_DOMAIN ),
		text: __( 'Open Gmail in browser', TEXT_DOMAIN ),
	},
	{
		href: `mailto:?to=${ ENCODED_EMAIL }`,
		image: 'hotmail.svg',
		title: __( 'Outlook', TEXT_DOMAIN ),
		text: __( 'Open Outlook in browser', TEXT_DOMAIN ),
	},
	{
		href: `https://compose.mail.yahoo.com/?to=${ ENCODED_EMAIL }&subject=&body=`,
		image: 'yahoo.svg',
		title: __( 'Yahoo', TEXT_DOMAIN ),
		text: __( 'Open Yahoo in browser', TEXT_DOMAIN ),
	},
	{
		href: `mailto:${ ENCODED_EMAIL }`,
		image: 'mail.svg',
		title: __( 'Default Email App', TEXT_DOMAIN ),
		text: __( 'Open your default email app', TEXT_DOMAIN ),
	},
];

// Port of the removed templates/dashboard/support.php (same classes), with dialog semantics added.
const SupportPopup = ( { isOpen, onClose } ) => {
	const [ copied, setCopied ] = useState( false );
	const dialogRef = useRef( null );
	const imageUrl = ( file ) => `${ getPublicUrl() }images/support/${ file }`;

	useEffect( () => {
		document.body.classList.toggle( 'popup-open', isOpen );
		if ( ! isOpen ) {
			return undefined;
		}

		const previousFocus = document.activeElement;
		dialogRef.current?.focus();

		const onKeyDown = ( event ) => {
			if ( event.key === 'Escape' ) {
				onClose();
			}
		};
		document.addEventListener( 'keydown', onKeyDown );

		return () => {
			document.removeEventListener( 'keydown', onKeyDown );
			document.body.classList.remove( 'popup-open' );
			previousFocus?.focus?.();
		};
	}, [ isOpen, onClose ] );

	const copyEmail = async () => {
		try {
			await window.navigator.clipboard.writeText( SUPPORT_EMAIL );
			setCopied( true );
			setTimeout( () => setCopied( false ), 1000 );
		} catch ( error ) {
			setCopied( false );
		}
	};

	return (
		<>
			{ isOpen && <div className="ssgsw-support-popup-overlay" onClick={ onClose } aria-hidden="true"></div> }
			<div
				ref={ dialogRef }
				className={ `ssgsw-support-popup${ isOpen ? ' show' : '' }` }
				role="dialog"
				aria-modal="true"
				aria-label={ __( 'Contact support', TEXT_DOMAIN ) }
				aria-hidden={ ! isOpen }
				tabIndex={ -1 }
			>
				<button type="button" className="support-cross-button" onClick={ onClose } aria-label={ __( 'Close', TEXT_DOMAIN ) }>
					&times;
				</button>
				<div className="wrapper">
					<img src={ imageUrl( 'wppool.svg' ) } alt="" />
					<p>{ __( 'Choose how you want to connect to us. Select the option convenient for you', TEXT_DOMAIN ) }</p>

					{ CHANNELS.map( ( channel ) => (
						<a key={ channel.image } href={ channel.href } target="_blank" rel="noreferrer">
							<div className="cards">
								<div className="support-card">
									<img src={ imageUrl( channel.image ) } alt="" />
									<div className="content">
										<p>{ channel.title }</p>
										<span>{ channel.text }</span>
									</div>
								</div>
							</div>
						</a>
					) ) }

					<div className="cards">
						<div className="support-card last">
							<img src={ imageUrl( 'support-mail.svg' ) } alt="" />
							<div className="content">
								<p>{ SUPPORT_EMAIL }</p>
								<span>{ __( 'Copy email address to your clipboard', TEXT_DOMAIN ) }</span>
							</div>
							<button type="button" className={ `support-button${ copied ? ' copy' : '' }` } onClick={ copyEmail }>
								{ copied ? __( 'Copied!', TEXT_DOMAIN ) : __( 'Copy Email', TEXT_DOMAIN ) }
							</button>
						</div>
					</div>

					<div className="wppool-brand">
						<p>
							{ __( 'Powered by', TEXT_DOMAIN ) }{ ' ' }
							<a href="https://wppool.dev" target="_blank" rel="noreferrer">
								{ __( 'WPPOOL', TEXT_DOMAIN ) }
							</a>
						</p>
					</div>
				</div>
			</div>
		</>
	);
};

export default SupportPopup;