/**
 * Link component.
 *
 * Site Kit by Google, Copyright 2019 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * External dependencies
 */
import PropTypes from 'prop-types';

const { Component } = wp.element;

class Link extends Component {
	render() {
		const {
			onClick,
			href,
			children,
			className,
			arrow,
			external,
			inverse,
			back,
			small,
			inherit,
			caps,
			danger,
			disabled,
			id,
		} = this.props;
		const SemanticLink = href ? 'a' : 'button';

		return (
			<SemanticLink
				className={ `
					googlesitekit-cta-link
					${ className ? className : '' }
					${ arrow ? 'googlesitekit-cta-link--arrow' : '' }
					${ external ? 'googlesitekit-cta-link--external' : '' }
					${ inverse ? 'googlesitekit-cta-link--inverse' : '' }
					${ back ? 'googlesitekit-cta-link--back' : '' }
					${ small ? 'googlesitekit-cta-link--small' : '' }
					${ inherit ? 'googlesitekit-cta-link--inherit' : '' }
					${ caps ? 'googlesitekit-cta-link--caps' : '' }
					${ danger ? 'googlesitekit-cta-link--danger' : '' }
					${ disabled ? 'googlesitekit-cta-link--disabled' : '' }
				` }
				onClick={ onClick }
				id={ id }
				href={ href ? href : undefined }
				target={ external ? '_blank' : undefined }
				rel={ external ? 'noopener noreferrer' : undefined }
			>
				{ children }
			</SemanticLink>
		);
	}
}

Link.propTypes = {
	onClick: PropTypes.func,
	href: PropTypes.string,
	children: PropTypes.oneOfType( [
		PropTypes.string.isRequired,
		PropTypes.array.isRequired,
	] ),
	className: PropTypes.string,
	arrow: PropTypes.bool,
	external: PropTypes.bool,
	inverse: PropTypes.bool,
	back: PropTypes.bool,
	small: PropTypes.bool,
	inherit: PropTypes.bool,
	caps: PropTypes.bool,
	danger: PropTypes.bool,
	disabled: PropTypes.bool,
};

Link.defaultProps = {
	onClick: null,
	href: '',
	className: '',
	arrow: false,
	external: false,
	inverse: false,
	back: false,
	small: false,
	inherit: false,
	caps: false,
	danger: false,
	disabled: false,
};

export default Link;

/**
 * Link component.
 *
 * Site Kit by Google, Copyright 2019 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * External dependencies
 */
import PropTypes from 'prop-types';

const { Component } = wp.element;

class Link extends Component {
	render() {
		const {
			onClick,
			href,
			children,
			className,
			arrow,
			external,
			inverse,
			back,
			small,
			inherit,
			caps,
			danger,
			disabled,
			id,
		} = this.props;
		const SemanticLink = href ? 'a' : 'button';
		// Note: the disabled attribute does not alter behavior of anchor tags,
		// hence the conditional click handler.
		const clickHandler = disabled ?
			( e ) => e.preventDefault() :
			onClick;

		return (
			<SemanticLink
				className={ `
					googlesitekit-cta-link
					${ className ? className : '' }
					${ arrow ? 'googlesitekit-cta-link--arrow' : '' }
					${ external ? 'googlesitekit-cta-link--external' : '' }
					${ inverse ? 'googlesitekit-cta-link--inverse' : '' }
					${ back ? 'googlesitekit-cta-link--back' : '' }
					${ small ? 'googlesitekit-cta-link--small' : '' }
					${ inherit ? 'googlesitekit-cta-link--inherit' : '' }
					${ caps ? 'googlesitekit-cta-link--caps' : '' }
					${ danger ? 'googlesitekit-cta-link--danger' : '' }
					${ disabled ? 'googlesitekit-cta-link--disabled' : '' }
				` }
				onClick={ clickHandler }
				id={ id }
				href={ href ? href : undefined }
				target={ external ? '_blank' : undefined }
				rel={ external ? 'noopener noreferrer' : undefined }
				disabled={ disabled }
			>
				{ children }
			</SemanticLink>
		);
	}
}

Link.propTypes = {
	onClick: PropTypes.func,
	href: PropTypes.string,
	children: PropTypes.oneOfType( [
		PropTypes.string.isRequired,
		PropTypes.array.isRequired,
	] ),
	className: PropTypes.string,
	arrow: PropTypes.bool,
	external: PropTypes.bool,
	inverse: PropTypes.bool,
	back: PropTypes.bool,
	small: PropTypes.bool,
	inherit: PropTypes.bool,
	caps: PropTypes.bool,
	danger: PropTypes.bool,
	disabled: PropTypes.bool,
};

Link.defaultProps = {
	onClick: null,
	href: '',
	className: '',
	arrow: false,
	external: false,
	inverse: false,
	back: false,
	small: false,
	inherit: false,
	caps: false,
	danger: false,
	disabled: false,
};

export default Link;

update Link to properly handle disabled prop