import React from 'react';
import { RouteComponentProps } from 'react-router-dom';
import { PlaybackType, DrmType, PlayoutRequestData, PlayerState } from '@sky-uk-ott/client-lib-js-player-addons-common-player';
import { CommonPlayerComponent } from '@sky-uk-ott/client-lib-react-player-component';
import PlayerControls from './player-controls';
import { getAssetConfigurationFromQueryString, AssetConfiguration } from '../asset-configuration';
import '../../css/player.css';

type PlayerComponentState = {
    ready: boolean;
    playoutRequestData?: PlayoutRequestData;
    play: { value: boolean };
    stop: { value: boolean };
    fullscreen: boolean;
    playerState?: PlayerState;
    showControls: boolean;
};

const DRMTypes = {
    PlayReady: DrmType.PlayReady,
    Widevine: DrmType.Widewine,
    VGC: DrmType.VGC,
};

export default class Player extends React.Component<RouteComponentProps, PlayerComponentState> {
    constructor(props: RouteComponentProps) {
        super(props);
        this.state = { ready: false, play: { value: false }, stop: { value: false }, fullscreen: false, showControls: true };
    }

    public componentDidMount() {
        const assetConfiguration = getAssetConfigurationFromQueryString(this.props.location.search);
        const playoutRequestData = this.buildPlayoutRequestData(assetConfiguration);
        this.setState({
            playoutRequestData,
            play: { value: true },
        });
    }

    public componentWillUnmount() {
        this.setState({
            play: { value: false },
            stop: { value: true },
        });
    }

    public render() {
        return (
            <div data-t-player-component>
                <CommonPlayerComponent
                    style={{ textAlign: 'center' }}
                    playoutRequest={this.state.playoutRequestData}
                    play={this.state.play}
                    stop={this.state.stop}
                    fullscreen={this.state.fullscreen}
                    onFullscreenChanged={this.onFullscreenChanged}
                    onStateChanged={this.handlePlayerStateChanged}
                >
                    {this.state.showControls && (
                        <PlayerControls
                            onPlay={this.onPlay}
                            onPause={this.onPause}
                            onFullscreen={this.onFullscreen}
                            isFullscreen={this.state.fullscreen}
                            playerState={this.state.playerState}
                        />
                    )}
                </CommonPlayerComponent>
            </div>
        );
    }

    private buildPlayoutRequestData(assetConfiguration: AssetConfiguration): PlayoutRequestData {
        const playbackType = PlaybackType[assetConfiguration.streamType || 'Vod'];
        return {
            type: playbackType,
            cdns: [
                {
                    url: assetConfiguration.manifestUri,
                    name: 'ovpDemo',
                },
            ],
            drmConfiguration: {
                licenceAcquisitionUrl: assetConfiguration.licensingUri,
                type: assetConfiguration.licensingUri && assetConfiguration.drmType ? DRMTypes[assetConfiguration.drmType] : null,
                deviceId: assetConfiguration.deviceId,
            },
            defaultAudioLanguage: 'en-US',
            position: playbackType === PlaybackType.Live ? Infinity : 0,
            autoplay: true,
        };
    }

    /* Player events */

    private onFullscreenChanged = (isFullscreen: boolean) => this.setState({ fullscreen: isFullscreen });
    private handlePlayerStateChanged = state => this.setState({ playerState: state });

    /* Controls events */

    private onPlay = () => this.setState({ play: { value: true } });
    private onPause = () => this.setState({ play: { value: false } });
    private onFullscreen = () => this.setState(state => ({ fullscreen: !state.fullscreen }));
}