import React = require('react');
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { ListBox } from 'browndash-components';
import { computed } from 'mobx';
import { observer } from 'mobx-react';
import { Doc } from '../../../fields/Doc';
import { StrCast } from '../../../fields/Types';
import { DocumentManager } from '../../util/DocumentManager';
import { DocFocusOptions } from '../nodes/DocumentView';
import { emptyFunction } from '../../../Utils';
import { SettingsManager } from '../../util/SettingsManager';

export interface SelectedDocViewProps {
    selectedDocs: Doc[];
}

@observer
export class SelectedDocView extends React.Component<SelectedDocViewProps> {
    @computed get selectedDocs() {
        return this.props.selectedDocs;
    }

    render() {
        return (
            <div className="selectedDocView-container">
                <ListBox
                    items={this.selectedDocs.map(doc => {
                        const options: DocFocusOptions = {
                            playAudio: false,
                            playMedia: false,
                            willPan: true,
                        };
                        return {
                            text: StrCast(doc.title),
                            val: StrCast(doc._id),
                            color: SettingsManager.userColor,
                            background: SettingsManager.userBackgroundColor,
                            icon: <FontAwesomeIcon size={'1x'} icon={Doc.toIcon(doc)} />,
                            onClick: () => DocumentManager.Instance.showDocument(doc, options, emptyFunction),
                        };
                    })}
                    color={SettingsManager.userColor}
                    background={SettingsManager.userBackgroundColor}
                />
            </div>
        );
    }
}