import { Link, LocationProvider } from '@reach/router';
import router from '@elementor/router';
import Icon from 'elementor-app/ui/atoms/icon';

export default class Button extends React.Component {
	static propTypes = {
		text: PropTypes.string.isRequired,
		hideText: PropTypes.bool,
		icon: PropTypes.string,
		tooltip: PropTypes.string,
		id: PropTypes.string,
		className: PropTypes.string,
		url: PropTypes.string,
		onClick: PropTypes.func,
		variant: PropTypes.oneOf( [ 'contained', 'underlined', 'outlined', '' ] ),
		color: PropTypes.oneOf( [ 'primary', 'secondary', 'cta', 'link', 'disabled' ] ),
		size: PropTypes.oneOf( [ 'sm', 'md', 'lg' ] ),
		target: PropTypes.string,
		rel: PropTypes.string,
		elRef: PropTypes.object,
	};

	static defaultProps = {
		id: '',
		className: '',
		variant: '',
		target: '_parent',
	};

	getCssId() {
		return this.props.id;
	}

	getClassName() {
		const baseClassName = 'eps-button',
			classes = [ baseClassName, this.props.className ];

		return classes
			.concat( this.getStylePropsClasses( baseClassName ) )
			.filter( ( classItem ) => '' !== classItem )
			.join( ' ' );
	}

	getStylePropsClasses( baseClassName ) {
		const styleProps = [ 'color', 'size', 'variant' ],
			stylePropClasses = [];

		styleProps.forEach( ( styleProp ) => {
			const stylePropValue = this.props[ styleProp ];

			if ( stylePropValue ) {
				stylePropClasses.push( baseClassName + '--' + stylePropValue );
			}
		} );

		return stylePropClasses;
	}

	getIcon() {
		if ( this.props.icon ) {
			const tooltip = this.props.tooltip || this.props.text;
			const icon = <Icon className={ this.props.icon } aria-hidden="true" title={ tooltip } />;
			let screenReaderText = '';

			if ( this.props.hideText ) {
				screenReaderText = <span className="sr-only" >{ tooltip }</span>;
			}

			return (
				<>
					{ icon }
					{ screenReaderText }
				</>
			);
		}
		return '';
	}

	getText() {
		return this.props.hideText ? '' : <span>{ this.props.text }</span>;
	}

	render() {
		const attributes = {},
			id = this.getCssId(),
			className = this.getClassName();

		// Add attributes only if they are not empty.
		if ( id ) {
			attributes.id = id;
		}

		if ( className ) {
			attributes.className = className;
		}

		if ( this.props.onClick ) {
			attributes.onClick = this.props.onClick;
		}

		if ( this.props.rel ) {
			attributes.rel = this.props.rel;
		}

		if ( this.props.elRef ) {
			attributes.ref = this.props.elRef;
		}

		const buttonContent = (
			<>
				{ this.getIcon() }
				{ this.getText() }
			</>
		);

		if ( this.props.url ) {
			if ( 0 === this.props.url.indexOf( 'http' ) ) {
				return (
					<a href={ this.props.url } target={ this.props.target } { ...attributes }>
						{ buttonContent }
					</a>
				);
			}

			// @see https://reach.tech/router/example/active-links.
			attributes.getProps = ( props ) => {
				if ( props.isCurrent ) {
					attributes.className += ' active';
				}

				return {
					className: attributes.className,
				};
			};

			return (
				<LocationProvider history={ router.appHistory }>
					<Link to={ this.props.url } { ...attributes } >
						{ buttonContent }
					</Link>
				</LocationProvider>
			);
		}

		return (
			<div { ...attributes }>
				{ buttonContent }
			</div>
		);
	}
}