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

import IconUtil from '../../../util/IconUtil';
import TimeUtil from '../../../util/TimeUtil';
import IDUtil from '../../../util/IDUtil';

import Strings from '../_Strings';
import Info from '../../shared/Info';

import { AnnotationEvents, MSAnnotationUtil } from '../AnnotationClient';

import TargetHeader from './TargetHeader';
import { renderPerType, getAnnotationsPerType } from './AnnotationHelpers';

import {
    ANNOTATION_TARGET,
    ANNOTATION_TYPE,
    SESSION_STORAGE_ACTIVE_TYPES
} from './Constants';

export default class SingleAnnotationTarget extends React.PureComponent {
    toggle = () => {
        this.props.toggle(this.props.target);
    };

    render() {
        // header
        const header = (
            <TargetHeader
                active={this.props.active}
                onToggle={this.toggle}
                title={this.props.title}
                count={
                    this.props.annotation && this.props.annotation.body
                        ? this.props.annotation.body.length
                        : 0
                }
                icon={this.props.icon}
            />
        );

        // types
        const types = this.props.active
            ? renderPerType(
                  getAnnotationsPerType(
                      this.props.activeTypes,
                      this.props.annotation
                  ),
                  this.props.target,
                  this.props.annotation,
                  this.props.annotationClient,
                  this.props.activeTypes
              )
            : null;

        return (
            <div
                className={classNames(
                    IDUtil.cssClassName('single-annotation-target'),
                    'target-' + this.props.target
                )}
            >
                {header}
                {types}
            </div>
        );
    }
}

SingleAnnotationTarget.propTypes = {
    target: PropTypes.string.isRequired,
    annotationClient: PropTypes.object.isRequired,
    title: PropTypes.string.isRequired,
    icon: PropTypes.object.isRequired,
    toggle: PropTypes.func.isRequired,
    active: PropTypes.bool.isRequired,
    activeTypes: PropTypes.arrayOf(PropTypes.string).isRequired,
    annotation: PropTypes.object
};
