import * as React from 'react';
import * as ReactDOM from 'react-dom';
import videojs from 'video.js';
import { VideoPlayerControls } from './VideoPlayerControls';

export interface IVjsVideoPlayerControlsOptions extends videojs.ComponentOptions {
    displayMuteToggle: boolean;
    displayPlayButton: boolean;
    displayFullscreenToggle: boolean;
}

const vjsComponent = videojs.getComponent('Component');

class VjsVideoPlayerControls extends vjsComponent {

    public static ComponentName = 'vjsVideoPlayerControls';

    private specificOptions: IVjsVideoPlayerControlsOptions;
    private isMuted = false;
    private isPlaying = false;
    private isFullscreen = false;

    constructor(player: videojs.Player, options: videojs.ComponentOptions) {
        super(player, options);
        this.specificOptions = options as IVjsVideoPlayerControlsOptions;

        this.mount = this.mount.bind(this);

        this.on(player, 'play', () => { this.handlePlay(); });
        this.on(player, 'pause', () => { this.handlePause(); });
        this.on(player, 'fullscreenchange', () => { this.handleFullscreenChange(); });

        player.ready(() => {
            this.mount();
        });

        this.on('dispose', () => {
            ReactDOM.unmountComponentAtNode(this.el());
        });
    }

    public mount() {
        this.updateComponent();
    }

    private handlePlay() {
        this.isPlaying = true;
        this.updateComponent();
    }

    private onPlayButtonClicked() {
        if (this.player_.paused()) {
            this.player_.play();
        } else {
            this.player_.pause();
        }
    }

    private handlePause() {
        this.isPlaying = false;
        this.updateComponent();
    }

    private onVolumeButtonClicked() {
        const vol = this.player_.volume();
        const lastVolume = (this.player_ as any).lastVolume_();

        if (vol === 0) {
            const volumeToSet = lastVolume < 0.1 ? 0.1 : lastVolume;
            this.player_.volume(volumeToSet);
            this.player_.muted(false);
            this.isMuted = false;
        } else {
            this.player_.muted(this.player_.muted() ? false : true);
            this.isMuted = this.player_.muted();
        }
        this.updateComponent();
    }

    private handleFullscreenChange() {
        this.isFullscreen = this.player_.isFullscreen();
        this.updateComponent();
    }

    private onFullscreenButtonClicked() {
        if (!this.player_.isFullscreen()) {
            this.player_.requestFullscreen();
        } else {
            this.player_.exitFullscreen();
        }
    }

    private updateComponent() {
        ReactDOM.render(<VideoPlayerControls
            isMuted={this.isMuted}
            onVolumeButtonClicked={() => this.onVolumeButtonClicked()}
            isPlaying={this.isPlaying}
            onPlayButtonClicked={() => this.onPlayButtonClicked()}
            isFullscreen={this.isFullscreen}
            onFullscreenButtonClicked={() => this.onFullscreenButtonClicked()}
            displayMuteToggle={this.specificOptions.displayMuteToggle}
            displayPlayButton={this.specificOptions.displayPlayButton}
            displayFullscreenToggle={this.specificOptions.displayFullscreenToggle}
             />, this.el());
    }
}

vjsComponent.registerComponent(VjsVideoPlayerControls.ComponentName, VjsVideoPlayerControls);

export default VjsVideoPlayerControls;