/* @flow */

import React, { Component } from 'react';

import { Toolbox } from '../../toolbox';

/**
 * Implements a React {@link Component} which represents the filmstrip on
 * Web/React.
 *
 * @extends Component
 */
export default class Filmstrip extends Component {
    static propTypes = {
        /**
         * Whether or not the toolbox should be displayed within the filmstrip.
         */
        displayToolbox: React.PropTypes.bool
    };

    /**
     * Implements React's {@link Component#render()}.
     *
     * @inheritdoc
     * @returns {ReactElement}
     */
    render() {
        return (
            <div className = 'filmstrip'>
                { this.props.displayToolbox ? <Toolbox /> : null }
                <div
                    className = 'filmstrip__videos'
                    id = 'remoteVideos'>
                    <div
                        className = 'filmstrip__videos'
                        id = 'filmstripLocalVideo'>
                        <span
                            className = 'videocontainer'
                            id = 'localVideoContainer'>
                            <div className = 'videocontainer__background' />
                            <span id = 'localVideoWrapper' />
                            <audio
                                autoPlay = { true }
                                id = 'localAudio'
                                muted = { true } />
                            <div className = 'videocontainer__toolbar' />
                            <div className = 'videocontainer__toptoolbar'>
                                <span
                                    className
                                        = 'connection-indicator-container' />
                            </div>
                            <div className = 'videocontainer__hoverOverlay' />
                            <div className = 'displayNameContainer' />
                            <div className = 'avatar-container' />
                        </span>
                    </div>
                    <div
                        className = 'filmstrip__videos'
                        id = 'filmstripRemoteVideos'>
                        {/*
                          * This extra video container is needed for scrolling
                          * thumbnails in Firefox; otherwise, the flex
                          * thumbnails resize instead of causing overflow.
                          */}
                        <div
                            className = 'remote-videos-container'
                            id = 'filmstripRemoteVideosContainer' />
                    </div>
                    <audio
                        id = 'userJoined'
                        preload = 'auto'
                        src = 'sounds/joined.wav' />
                    <audio
                        id = 'userLeft'
                        preload = 'auto'
                        src = 'sounds/left.wav' />
                </div>
            </div>
        );
    }
}