import React from 'react';
import { PlayerState } from '@sky-uk-ott/client-lib-js-player-addons-common-player';
import { playerStateToString } from '../player-state-converter';

export interface PlayerControlsProps {
    onPlay: () => void;
    onPause: () => void;
    onFullscreen: () => void;
    isFullscreen: boolean;
    playerState: PlayerState;
}

export default class PlayerControls extends React.Component<PlayerControlsProps, {}> {
    constructor(props: PlayerControlsProps) {
        super(props);
    }

    public render() {
        return (
            <div className="player-controls">
                <span data-t-player-state className="player-state">
                    {playerStateToString(this.props.playerState)}
                </span>
                {!this.isPlaying() && (
                    <button data-t-player-play-button className="player-button" onClick={this.props.onPlay}>
                        Play
                    </button>
                )}
                {this.isPlaying() && (
                    <button data-t-player-pause-button className="player-button" onClick={this.props.onPause}>
                        Pause
                    </button>
                )}
                <button data-t-player-fullscreen-button className="player-button" onClick={this.props.onFullscreen}>
                    {this.props.isFullscreen ? 'Exit Fullscreen' : 'Fullscreen'}
                </button>
            </div>
        );
    }

    private isPlaying(): boolean {
        return this.props.playerState === PlayerState.Playing;
    }
}