import PropTypes from 'prop-types';
import { Component } from 'react';
import { connect } from 'react-redux';
import {
	getCurrentUserEmail,
	isCurrentUserEmailVerified,
} from 'calypso/state/current-user/selectors';
import isUnlaunchedSite from 'calypso/state/selectors/is-unlaunched-site';
import { getSelectedSiteId } from 'calypso/state/ui/selectors';
import EmailUnverifiedNotice from './email-unverified-notice.jsx';

import './style.scss';

export class EmailVerificationGate extends Component {
	static propTypes = {
		allowUnlaunched: PropTypes.bool,
		noticeText: PropTypes.node,
		noticeStatus: PropTypes.string,
		children: PropTypes.node,
		//connected
		userEmail: PropTypes.string,
		needsVerification: PropTypes.bool,
	};

	handleFocus = ( e ) => {
		e.target.blur();
	};

	render() {
		if ( this.props.needsVerification ) {
			return (
				<div tabIndex="-1" className="email-verification-gate" onFocus={ this.handleFocus }>
					<EmailUnverifiedNotice
						userEmail={ this.props.userEmail }
						noticeText={ this.props.noticeText }
						noticeStatus={ this.props.noticeStatus }
					/>
					<div className="email-verification-gate__content">{ this.props.children }</div>
				</div>
			);
		}

		return <div>{ this.props.children }</div>;
	}
}

export default connect( ( state, { allowUnlaunched } ) => {
	const userEmail = getCurrentUserEmail( state );
	const needsVerification =
		! isCurrentUserEmailVerified( state ) &&
		! ( allowUnlaunched && isUnlaunchedSite( state, getSelectedSiteId( state ) ) );

	return { userEmail, needsVerification };
} )( EmailVerificationGate );
