import React from 'react';
import PropTypes from 'prop-types';

import TimeUtil from '../../../../util/TimeUtil';
import IDUtil from '../../../../util/IDUtil';

import FlexPlayerUtil from '../../../../util/FlexPlayerUtil';
import { AnnotationEvents } from '../../AnnotationClient';

export default class SegmentationTier extends React.PureComponent {

	constructor(props) {
		super(props);
	}

	componentDidMount() {
	    window.addEventListener('resize', this.updateCanvasDimensions);
	    this.props.annotationClient.events.bind(AnnotationEvents.ON_SET_SELECTION, this.onSelection);
	    this.updateCanvasDimensions();
	}

	componentWillUnmount() {
		window.removeEventListener('resize', this.updateCanvasDimensions);
		this.props.annotationClient.events.unbind(AnnotationEvents.ON_SET_SELECTION, this.onSelection);
	}

	updateCanvasDimensions = () => {
		const c = document.getElementById('timebar_canvas__' + this.props.mediaObject.id);
		const container = document.getElementById('timebar__' + this.props.mediaObject.id);
		if(container) {
			c.width = container.offsetWidth;
			c.height = container.offsetHeight;
		}
	};

	onSelection = selection => {
		this.repaint();
	};

	seek = event => {
		const c = document.getElementById("timebar_canvas__" + this.props.mediaObject.id);
		const mousePos = this.getMousePos(c, event);
        const pos = this.props.duration / 100 * (mousePos.x / (c.width / 100));
        FlexPlayerUtil.seekRelativeToOnAir(this.props.playerAPI, pos, this.props.mediaObject)
		this.updateCanvasDimensions();
	};

	//called via the TierView
	updatePosition = pos => {
		this.curPosition = pos;
		this.repaint();
	};

	repaint = () => {
		const start = this.props.annotationClient.activeSelection ?
			this.props.annotationClient.activeSelection.start :
			-1
		;
		const end = this.props.annotationClient.activeSelection ?
			this.props.annotationClient.activeSelection.end :
			-1
		;
		const c = document.getElementById("timebar_canvas__" + this.props.mediaObject.id);
		if(c.width == 0 && c.height == 0) {
			this.updateCanvasDimensions();
		}
		let t = this.curPosition;
        if(!t) {
            t = start;
        }
        const formattedTime = TimeUtil.formatTime(t);
        const elapsed = c.width / 100 * (t / (this.props.duration / 100));
        const startPoint = c.width / 100 * (start / (this.props.duration / 100));
        const endPoint = c.width / 100 * (end / (this.props.duration / 100));
        const ctx = c.getContext("2d");
        ctx.clearRect (0, 0, c.width, c.height);
        ctx.fillStyle = "#FF0000";
        ctx.fillRect(0,0, elapsed, c.height / 3);//time progressing
        ctx.fillStyle = "#00FF00";
        ctx.fillRect(startPoint, 0, 3, c.height);//time progressing
        ctx.fillStyle = "#FFFF00";
        ctx.fillRect(endPoint, 0, 3, c.height);//time progressing
        ctx.font = "20px Verdana";
        ctx.fillStyle = "#FFFFFF";
        ctx.fillText(formattedTime, 10, c.height - 5);
	};

	getMousePos = (canvas, event) => {
	    const rect = canvas.getBoundingClientRect();
	    return {
			x: event.clientX - rect.left,
			y: event.clientY - rect.top
	    };
	};

	render() {
		return (
			<div id={'timebar__' + this.props.mediaObject.id} className={IDUtil.cssClassName('segmentation-timeline')}>
				<canvas id={'timebar_canvas__' + this.props.mediaObject.id} width="300" height="50"
					onClick={this.seek}>
				</canvas>
			</div>
		)
	}
}


SegmentationTier.propTypes = {
	playerAPI : PropTypes.object.isRequired,
    mediaObject : PropTypes.object.isRequired,
    duration : PropTypes.number.isRequired,
    annotationClient : PropTypes.object.isRequired
}