import React from 'react';

type AssetProps = {
    history: any;
    licensingUri?: string;
    manifestUri: string;
    deviceId?: string;
    drmType?: string;
    streamType?: string;
    onUpdateManifestUri: (manifestUri: string) => void;
    onUpdateLicensingUri: (licensingUr: string) => void;
    onUpdateDeviceId: (deviceId: string) => void;
    onUpdateDRMType: (drmType: string) => void;
    onUpdateStreamType: (streamType: string) => void;
    onUriSelection: (assetUrl: string, licensingUrl: string) => void;
    onLoadPlayer: () => void;
};

const manifestUriLabelName = 'manifestUri';
const licenseUriLabelName = 'licenseUri';
const deviceIdLabelName = 'deviceId';
const drmTypeLabelName = 'drmType';
const streamTypeLabelName = 'streamType';

export default class AssetButtons extends React.Component<AssetProps, {}> {
    constructor(props) {
        super(props);
    }

    public render() {
        return (
            <form>
                <div className="form-group">
                    <label htmlFor="streamType">
                        <h5>Stream Type</h5>
                    </label>
                    <select
                        className="form-control"
                        name={streamTypeLabelName}
                        id="streamType"
                        value={this.props.streamType || ''}
                        onChange={event => this.props.onUpdateStreamType(event.target.value)}
                    >
                        <option value="Live">Live</option>
                        <option value="Vod">Vod</option>
                    </select>
                </div>
                <div className="form-group">
                    <label htmlFor="asset">
                        <h5>Asset URL</h5>
                    </label>
                    <input
                        type="text"
                        className="form-control"
                        name={manifestUriLabelName}
                        id="asset"
                        placeholder="http://asset-url.com"
                        value={this.props.manifestUri}
                        onChange={event => this.props.onUpdateManifestUri(event.target.value)}
                    />
                </div>
                <div className="form-group">
                    <label htmlFor="licensingUrl">
                        <h5>Licensing URL</h5>
                    </label>
                    <input
                        type="text"
                        className="form-control"
                        name={licenseUriLabelName}
                        id="license"
                        placeholder="http://license-url.com"
                        value={this.props.licensingUri || ''}
                        onChange={event => this.props.onUpdateLicensingUri(event.target.value)}
                    />
                </div>
                <div className="form-group">
                    <label htmlFor="drmtype">
                        <h5>DRM Type</h5>
                    </label>
                    <select
                        className="form-control"
                        name={drmTypeLabelName}
                        id="drmtype"
                        value={this.props.drmType || ''}
                        onChange={event => this.props.onUpdateDRMType(event.target.value)}
                    >
                        <option value="PlayReady">PlayReady</option>
                        <option value="Widevine">Widevine</option>
                    </select>
                </div>
                <div className="form-group">
                    <label htmlFor={deviceIdLabelName}>
                        <h5>Device Id</h5>
                    </label>
                    <input
                        type="text"
                        className="form-control"
                        name="deviceId"
                        id="deviceId"
                        value={this.props.deviceId || ''}
                        onChange={event => this.props.onUpdateDeviceId(event.target.value)}
                    />
                </div>
                <div className="text-center">
                    <button type="button" className="btn btn-info" onClick={this.handleSubmit}>
                        Load
                    </button>
                </div>
            </form>
        );
    }

    private handleSubmit = () => {
        this.props.onLoadPlayer();
    };
}