import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import IDUtil from '../../util/IDUtil'; // for generating unique CSS classnames for this component
import { ResourceViewerContext } from './ResourceViewerContext';
import ColumnHeader from './ColumnHeader';
import Tabs from './Tabs';
import BaseColumn, { COLUMN_STATIC } from './BaseColumn';
import MetadataColumn from './MetadataColumn';
import ContentAnnotationsColumn from './ContentAnnotationsColumn';
import Strings from './_Strings';

/*
	This component shows the static metadata and content annotations
*/

const TAB_METADATA = 'metadata';
const TAB_CONTENT_ANNOTATIONS = 'content_annotations';

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

    constructor(props) {
        super(props);

        // define our tabs
        this.tabs = [
            {
                id: TAB_METADATA,
                title: Strings.METADATA_TITLE,
                description: Strings.METADATA_HELP,
                onClick: () => {
                    this.setActiveTab(TAB_METADATA);
                }
            },
            {
                id: TAB_CONTENT_ANNOTATIONS,
                title: Strings.CONTENT_ANNOTATIONS_TITLE,
                description: Strings.CONTENT_ANNOTATIONS_HELP,
                onClick: () => {
                    this.setActiveTab(TAB_CONTENT_ANNOTATIONS);
                }
            }
        ];

        this.state = {
            activeTab: this.tabs[0].id
        };
    }

    setActiveTab = activeTab => {
        this.setState({ activeTab });
    };

    getColumnContent = id => {
        switch (id) {
            case TAB_METADATA: return <MetadataColumn resource={this.context.resource}/>; break;
            case TAB_CONTENT_ANNOTATIONS: return <ContentAnnotationsColumn/>; break;
            default: return <div>Unknown content column: {id}</div>; break;
        }
    };

    toggleColumn = () => this.props.onToggle(COLUMN_STATIC);

    renderActive(toggleColumn, tabs, activeTab) {
        const columnContent = this.getColumnContent(activeTab);
        return (
            <div>
                <ColumnHeader onClose={toggleColumn}>
                    <Tabs tabs={tabs} activeTab={activeTab} />
                </ColumnHeader>

                <div className="column-content">{columnContent}</div>
            </div>
        );
    }

    renderInactive(toggleColumn) {
        return (
            <div onClick={toggleColumn}>
                <div className="icon"></div>
                <div className="title">
                    {Strings.METADATA_TITLE +
                        ' & ' +
                        Strings.CONTENT_ANNOTATIONS_TITLE}
                </div>
            </div>
        );
    }

    render() {
        return (
            <BaseColumn
                className={classNames(IDUtil.cssClassName('static-column'), {
                    active: this.props.active,
                    inactive: !this.props.active
                })}
            >
                {this.props.active
                    ? this.renderActive(
                          this.toggleColumn,
                          this.tabs,
                          this.state.activeTab
                      )
                    : this.renderInactive(this.toggleColumn)}
            </BaseColumn>
        );
    }
}

StaticColumn.propTypes = {
    onToggle: PropTypes.func.isRequired
};
