import BaseView from "base-view";
import throttle from "lodash.throttle";

const PROGRESS_INDICATOR_SELECTOR = '.a-progress-button__indicator';

const HIDDEN_STATE = 'a-progress-button--hidden';

export default class ProgressButton extends BaseView {

	constructor(element) {
		super(element);

		this.article = document.querySelector('[data-article-progress]');
		this.progressIndicator = this.element.querySelector(PROGRESS_INDICATOR_SELECTOR);
		this.circumference = this.progressIndicator.r.baseVal.value * 2 * Math.PI; // Progress button circumference
		this.header = false;

		this.maybeHidden();
		this.updateProgress(); // Init progress on page load / page refresh
	}

	bind() {
		viewport_service.on( 'change', this.viewportChange.bind(this) );

		this.resizeHanlder = throttle(this.updateProgress, 500).bind(this);
		this.scrollHanlder = throttle(this.updateProgress, 100).bind(this);
		this.hiddenHanlder = throttle(this.toggleHidden, 100).bind(this);

		this.viewportChange();
	}

	bindProgress() {
		window.addEventListener( 'resize', this.resizeHanlder );
		window.addEventListener( 'scroll', this.scrollHanlder );
		if ( this.header ) window.addEventListener( 'scroll', this.hiddenHanlder );
	}

	unbindProgress() {

		window.removeEventListener('resize', this.resizeHanlder );
		window.removeEventListener('scroll', this.scrollHanlder );
		if ( this.header ) window.removeEventListener('scroll', this.hiddenHanlder );
	}

	viewportChange() {
		this.maybeHidden();

		if ( viewport_service.isMobile() ) {
			this.bindProgress();
		}
		else {

			this.unbindProgress();
		}
	}

	updateProgress() {
		this.relativeScroll = (window.scrollY - this.article.offsetTop) / (this.article.clientHeight - window.innerHeight);
		this.progress = (
			(this.relativeScroll < 0) ? 0 : (
				(this.relativeScroll > 1) ? 1 : this.relativeScroll
			)
		);
		this.progressIndicator.style.strokeDashoffset = this.circumference * (1 - (this.progress / 1));
	}

	toggleHidden() {

		if( (this.header.getBoundingClientRect().top - parseInt(getComputedStyle(this.header).top)) <= 1 ) {
			this.removeClass( HIDDEN_STATE );
		}
		else {
			this.addClass( HIDDEN_STATE );
		}
	}

	maybeHidden() {
		if ( !document.body.classList.contains('ads') ) {
			return;
		}

		// Hide the button by default
		this.addClass( HIDDEN_STATE );

		// Get the header element reference to check the sticky state
		this.header = document.querySelector('.o-header');
	}

	destroy() {
		super.destroy();

		this.unbindProgress();
	}
}