import './player.css'
export const Player: React.FC = () => {
    return (
        <>
            <div id="playerUI" className="noselect">
                <div id="player"></div>
            </div>
            <div id="overlay">
                <div id="controls">
                    <button className="tooltip" id="fullscreen-btn">
                        <span className="tooltiptext">Fullscreen</span>
                    </button>
                    <button className="tooltip" id="settingsBtn">
                        <span className="tooltiptext">Settings</span>
                    </button>
                    <button className="tooltip" id="statsBtn">
                        <span className="tooltiptext">Information</span>
                    </button>
                </div>
                <div id="unrealengine">
                </div>
                <div id="connection" className="tooltip">
                    <span className="tooltiptext" id="qualityText">Not connected</span>
                </div>
                <div className="panel-wrap" id="settings-panel">
                    <div className="panel">
                        <div id="heading">Settings</div>
                        <div id="close"></div>
                        <div id="content">
                            <div id="fillWindow" className="setting">
                                <div className="settings-text">Enlarge display to fill window</div>
                                <label className="tgl-switch">
                                    <input type="checkbox" id="enlarge-display-to-fill-window-tgl" className="tgl tgl-flat" checked />
                                    <div className="tgl-slider"></div>
                                </label>
                            </div>
                            <div id="qualityControlOwnership" className="setting">
                                <div className="settings-text">Is quality controller?</div>
                                <label className="tgl-switch">
                                    <input type="checkbox" id="quality-control-ownership-tgl" className="tgl tgl-flat" />
                                    <div className="tgl-slider"></div>
                                </label>
                            </div>
                            <div id="matchViewportResolution" className="setting">
                                <div className="settings-text">Match viewport resolution</div>
                                <label className="tgl-switch">
                                    <input type="checkbox" id="match-viewport-res-tgl" className="tgl tgl-flat" />
                                    <div className="tgl-slider"></div>
                                </label>
                            </div>
                            <div id="offerToReceive" className="setting">
                                <div className="settings-text">Offer To Receive</div>
                                <label className="tgl-switch">
                                    <input type="checkbox" id="offer-receive-tgl" className="tgl tgl-flat" />
                                    <div className="tgl-slider"></div>
                                </label>
                            </div>
                            <div id="preferSFU" className="setting">
                                <div className="settings-text">Prefer SFU</div>
                                <label className="tgl-switch">
                                    <input type="checkbox" id="prefer-sfu-tgl" className="tgl tgl-flat" />
                                    <div className="tgl-slider"></div>
                                </label>
                            </div>
                            <div id="useMic" className="setting">
                                <div className="settings-text">Use microphone</div>
                                <label className="tgl-switch">
                                    <input type="checkbox" id="use-mic-tgl" className="tgl tgl-flat" />
                                    <div className="tgl-slider"></div>
                                </label>
                            </div>
                            <div id="forceMonoAudio" className="setting">
                                <div className="settings-text">Force mono audio</div>
                                <label className="tgl-switch">
                                    <input type="checkbox" id="force-mono-tgl" className="tgl tgl-flat" />
                                    <div className="tgl-slider"></div>
                                </label>
                            </div>
                            <div id="forceTURN" className="setting">
                                <div className="settings-text">Force TURN</div>
                                <label className="tgl-switch">
                                    <input type="checkbox" id="force-turn-tgl" className="tgl tgl-flat" />
                                    <div className="tgl-slider"></div>
                                </label>
                            </div>
                            <div id="toggleControl" className="setting">
                                <div className="settings-text" id="control-scheme-text">Control Scheme</div>
                                <label className="btn-overlay">
                                    <label className="tgl-switch">
                                        <input type="checkbox" id="control-tgl" className="tgl tgl-flat" />
                                        <div className="tgl-slider"></div>
                                    </label>
                                </label>
                            </div>

                            <div id="toggleCursor" className="setting">
                                <div className="settings-text" id="cursor-text">Hide Browser Cursor</div>
                                <label className="btn-overlay">
                                    <label className="tgl-switch">
                                        <input type="checkbox" id="cursor-tgl" className="tgl tgl-flat" />
                                        <div className="tgl-slider"></div>
                                    </label>
                                </label>
                            </div>
                            <div id="showFPS" className="setting">
                                <div className="settings-text">Show FPS</div>
                                <label className="btn-overlay">
                                    <input type="button" id="show-fps-button" className="overlay-button btn-flat" value="Toggle" />
                                </label>
                            </div>
                            <div id="keyframeRequest" className="setting">
                                <div className="settings-text">Request KeyFrame</div>
                                <label className="btn-overlay">
                                    <input type="button" id="request-keyframe-button" className="overlay-button btn-flat" value="Request" />
                                </label>
                            </div>
                            <section id="encoderSettings">
                                <div id="encoderSettingsHeader" className="settings-text">
                                    <div>Encoder Settings</div>
                                </div>
                                <div id="encoderParamsContainer" className="collapse">
                                    <div className="form-group">
                                        <label htmlFor="encoder-min-qp-text">Min QP</label>
                                        <input type="number" className="form-control" id="encoder-min-qp-text" value="0" min="0"
                                            max="51" />
                                        <label htmlFor="encoder-max-qp-text">Max QP</label>
                                        <input type="number" className="form-control" id="encoder-max-qp-text" value="51" min="0"
                                            max="51" />
                                        <br></br>
                                        <input id="encoder-params-submit" className="overlay-button btn-flat" type="button"
                                            value="Apply" />
                                    </div>
                                </div>

                            </section>

                            <section id="webRTCSettings">
                                <div id="webRTCSettingsHeader" className="settings-text">
                                    <div>WebRTC Settings</div>
                                </div>
                                <div id="webrtcParamsContainer" className="collapse">
                                    <div className="form-group">
                                        <label htmlFor="webrtc-fps-text">FPS</label>
                                        <input type="number" className="form-control" id="webrtc-fps-text" value="60" min="1"
                                            max="999" />
                                        <label htmlFor="webrtc-min-bitrate-text">Min bitrate (kbps)</label>
                                        <input type="number" className="form-control" id="webrtc-min-bitrate-text" value="0" min="0"
                                            max="100000" />
                                        <label htmlFor="webrtc-max-bitrate-text">Max bitrate (kbps)</label>
                                        <input type="number" className="form-control" id="webrtc-max-bitrate-text" value="0" min="0"
                                            max="100000" />
                                        <br></br>
                                        <input id="webrtc-params-submit" className="overlay-button btn-flat" type="button"
                                            value="Apply" />
                                    </div>
                                </div>
                            </section>

                            <section id="streamSettings">
                                <div id="streamSettingsHeader" className="settings-text">
                                    <div>Stream Settings</div>
                                </div>
                                <div id="streamSettingsContainer" className="collapse">
                                    <div className="form-group">
                                        <div className="settings-text">Player stream</div>
                                        <select className="form-control" id="stream-select"></select>
                                        <div className="settings-text">Player track</div>
                                        <select className="form-control" id="track-select"></select>
                                    </div>
                                </div>
                            </section>
                            <br></br>
                            <section id="connectionSettings">
                                <div id="connectionHeader" className="settings-text">
                                    <div>Stream Settings</div>
                                </div>
                                <div id="connectionContainer" className="collapse">
                                    <div className="setting">
                                        <div className="settings-text"></div>
                                        <label className="btn-overlay">
                                            <input type="button" id="restart-stream-button" className="overlay-button btn-flat" value="Restart stream" />
                                        </label>
                                    </div>
                                </div>
                            </section>
                        </div>
                    </div>
                </div>
                <div className="panel-wrap" id="stats-panel">
                    <div className="panel">
                        <div id="heading">Information</div>
                        <div id="close"></div>
                        <div id="content">
                            <section id="statsPanel">
                                <div className="setting settings-text">
                                    <div>Session Stats</div>
                                </div>
                                <div id="statsContainer" className="statsContainer">
                                    <div id="stats" className="stats"></div>
                                </div>
                            </section>
                            <br></br>
                            <section id="latencyTest">
                                <div className="setting">
                                    <div className="settings-text">
                                        <div>Latency Report</div>
                                    </div>
                                    <label className="btn-overlay">
                                        <input type="button" id="test-latency-button" className="overlay-button btn-flat"
                                            value="Get Report" />
                                    </label>
                                </div>
                                <div id="latencyStatsContainer" className="statsContainer">
                                    <div className="stats">No report yet</div>
                                </div>
                            </section>
                        </div>
                    </div>
                </div>
            </div>
        </>

    )
}