import React from 'react';
import PropTypes from 'prop-types';

import IDUtil from '../../util/IDUtil'; // for generating unique CSS classnames for this component
import BookmarkUtil from '../../util/BookmarkUtil';
import ComponentUtil from '../../util/ComponentUtil';

// all the new "column" components
import AnnotationColumn from './AnnotationColumn';
import MediaColumn from './MediaColumn';
import StaticColumn from './StaticColumn';
import ViewerHeader from './ViewerHeader';
import { COLUMN_STATIC, COLUMN_ANNOTATIONS } from './BaseColumn';

// bookmark selector
import FlexModal from '../FlexModal';
import BookmarkSelector from '../bookmark/BookmarkSelector';

import { ResourceViewerContext } from './ResourceViewerContext';

/*
	This component contains the main UI elements for the resource viewer
*/

export default class ViewerBase extends React.Component {
    static contextType = ResourceViewerContext;

    constructor(props) {
        super(props);

        this.CLASS_PREFIX = 'VB';

        this.state = {
            // default column visibility
            [COLUMN_STATIC]: true,
            [COLUMN_ANNOTATIONS]: true,
            showBookmarkSelector: false
        };
    }

    // Toggle column visibility for column with given id
    toggleColumn = columnId => {
        this.setState({ [columnId]: !this.state[columnId] });

        // trigger window resize, so things like timeline get resized
        setTimeout(() => {
            window.dispatchEvent(new Event('resize'));
        }, 300);
    };

    /* ----------------------------- BOOKMARK SELECTOR ------------------------ */

    // Render bookmark modal
    renderBookmarkModal = (activeProject, itemData, user) => {
        return (
            <FlexModal
                elementId="bookmark__modal"
                stateVariable="showBookmarkModal"
                owner={this}
                size="large"
                title="Select one or more bookmark groups to associate the current resource with"
                onClose={this.hideBookmarkSelector}
            >
                <BookmarkSelector
                    onOutput={this.bookmarkSelection}
                    user={user}
                    project={activeProject}
                    collectionId={itemData.index}
                    resourceId={itemData.resourceId}
                />
            </FlexModal>
        );
    };

    // Show the bookmark selector
    showBookmarkSelector = () => {
        this.setState({ showBookmarkSelector: true });
    };

    // Hide the bookmark selector
    hideBookmarkSelector = () => {
        this.setState({ showBookmarkSelector: false });
    };

    bookmarkSelection = (_, data) => {
        this.hideBookmarkSelector();

        // hide the modal
        ComponentUtil.hideModal(
            this,
            'showBookmarkModal',
            'bookmark__modal',
            true,
            () => {
                // put the complicated function in a new util
                // (not in the context, since it surpasses this context and could be used in other contexts as well)
                BookmarkUtil.bookmarkToGroupInProject(
                    this.context.resource.resourceId,
                    this.context.collectionConfig.getSearchIndex(),
                    data.allGroups,
                    data.selectedGroups,
                    () => {}
                );
            }
        );
    };

    /* ----------------------------- RENDER ------------------------ */

    render() {
        const bookmarkSelector = this.state.showBookmarkSelector
            ? this.renderBookmarkModal(
                  this.context.activeProject,
                  this.context.resource,
                  this.context.user
              )
            : null;

        return (
            <div className={IDUtil.cssClassName('viewer-base')}>
                <ViewerHeader
                    activeProject={this.context.activeProject}
                    userProjects={this.context.userProjects}
                    user={this.context.user}
                    resource={this.context.resource}
                    query={this.context.query}
                    showPaging={!this.context.singleResource}
                    collectionConfig={this.context.collectionConfig}
                    recipe={this.context.recipe}
                    onBookmark={this.showBookmarkSelector}
                    setActiveProject={this.context.setActiveProject}
                />

                <div className="columns">
                    <MediaColumn
                        mediaObjects={
                            this.context.resource.playableContent || []
                        }
                        transcripts={
                            this.context.resource.rawData.layer__asr || null
                        }
                    />

                    <StaticColumn
                        onToggle={this.toggleColumn}
                        active={this.state[COLUMN_STATIC]}
                    />

                    <AnnotationColumn
                        onToggle={this.toggleColumn}
                        active={this.state[COLUMN_ANNOTATIONS]}
                        showBookmarkSelector={this.showBookmarkSelector}
                    />
                </div>

                {bookmarkSelector}
            </div>
        );
    }
}

ViewerBase.propTypes = {}; //just uses the ResourceViewerContext
