import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { ListBox } from 'browndash-components';
import { computed } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { emptyFunction } from '../../../Utils';
import { Doc } from '../../../fields/Doc';
import { StrCast } from '../../../fields/Types';
import { SnappingManager } from '../../util/SnappingManager';
import { DocumentView } from '../nodes/DocumentView';
import { FocusViewOptions } from '../nodes/FocusViewOptions';

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: FocusViewOptions = {
                            playAudio: false,
                            playMedia: false,
                            willPan: true,
                        };
                        return {
                            text: StrCast(doc.title),
                            val: StrCast(doc._id),
                            color: SnappingManager.userColor,
                            background: SnappingManager.userBackgroundColor,
                            icon: <FontAwesomeIcon size="1x" icon={Doc.toIcon(doc)} />,
                            onClick: () => DocumentView.showDocument(doc, options, emptyFunction),
                        };
                    })}
                    color={SnappingManager.userColor}
                    background={SnappingManager.userBackgroundColor}
                />
            </div>
        );
    }
}