import React from 'react';

type AssetConfiguratorProps = {
    deviceId?: string;
    drmType?: string;
    licensingUri?: string;
    manifestUri: string;
    streamType?: string;
    onUpdateManifestUri: (manifestUri: string) => void;
    onUpdateLicensingUri: (licensingUr: string) => void;
    onUpdateDeviceId: (deviceId: string) => void;
    onUpdateDRMType: (drmType: string) => void;
    onUpdateStreamType: (streamType: string) => void;
    onLoadPlayer: () => void;
};

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

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

    public render() {
        return (
            <form data-t-asset-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 || ''}
                        onInput={event => this.props.onUpdateStreamType((event.target as HTMLInputElement).value)}
                        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
                        data-t-asset-manifest-url
                        type="text"
                        className="form-control"
                        name={manifestUriLabelName}
                        id="asset"
                        placeholder="http://asset-url.com"
                        value={this.props.manifestUri}
                        onInput={event => this.props.onUpdateManifestUri((event.target as HTMLInputElement).value)}
                        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 || ''}
                        onInput={event => this.props.onUpdateLicensingUri((event.target as HTMLInputElement).value)}
                        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 || ''}
                        onInput={event => this.props.onUpdateDRMType((event.target as HTMLInputElement).value)}
                        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 || ''}
                        onInput={event => this.props.onUpdateDeviceId((event.target as HTMLInputElement).value)}
                        onChange={event => this.props.onUpdateDeviceId(event.target.value)}
                    />
                </div>
                {(!this.props.manifestUri && (
                    <div style={{ marginTop: '10px' }} className="alert alert-danger" role="alert">
                        Please provide at least a Manifest Uri
                    </div>
                )) || (
                    <div className="text-center">
                        <button data-t-asset-load-button type="button" className="btn btn-info" onClick={() => this.props.onLoadPlayer()}>
                            Load
                        </button>
                    </div>
                )}
            </form>
        );
    }
}