import { Component, ReactNode } from 'react';
import * as React from 'react';

interface IVideoPlayerControlsProps {
    isMuted: boolean;
    isPlaying: boolean;
    isFullscreen: boolean;
    onPlayButtonClicked: () => void;
    onVolumeButtonClicked: () => void;
    onFullscreenButtonClicked: () => void;
    displayMuteToggle: boolean;
    displayPlayButton: boolean;
    displayFullscreenToggle: boolean;
}

export class VideoPlayerControls extends Component<IVideoPlayerControlsProps, {}> {
    public render(): ReactNode {
        return (
            <div className='ns-video-controls'>
                {this.props.displayMuteToggle &&
                    <div className={this.props.isMuted ? 'ns-video-icon ns-video-icon-audio-muted' : 'ns-video-icon ns-video-icon-audio'} onClick={() => this.props.onVolumeButtonClicked()}>
                    </div>
                }
                {this.props.displayPlayButton &&
                    <div className={this.props.isPlaying ? 'ns-video-icon ns-video-icon-pause' : 'ns-video-icon ns-video-icon-play'} onClick={() => this.props.onPlayButtonClicked()}>
                    </div>
                }
                {this.props.displayFullscreenToggle &&
                    <div className={this.props.isFullscreen ? 'ns-video-icon ns-video-icon-minimize' : 'ns-video-icon ns-video-icon-fullscreen'} onClick={() => this.props.onFullscreenButtonClicked()}>
                    </div>
                }
            </div>
        );
    }
}