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

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

import SegmentHeader from './SegmentHeader';
import { renderPerType, getAnnotationsPerType } from './AnnotationHelpers';
import { MSAnnotationUtil } from '../AnnotationClient';
import { ANNOTATION_COLUMN_SEGMENT_ID } from './Constants';

export default class Segment extends React.PureComponent {
    constructor(props) {
        super(props);

        this.state = {
            active: false
        };
    }

    onSelectSegment = segment => {
        const selection = MSAnnotationUtil.extractSelectionFromTarget(
            segment.target
        );
        if (!selection) {
            console.error('could not extract selection from segment', segment);
            return;
        }
        this.props.annotationClient.setActiveAnnotation(segment);
        this.props.annotationClient.setActiveSelection(selection);
    };

    toggle = () => {
        this.setState({ active: !this.state.active });
    };

    render() {
        // header
        const header = (
            <SegmentHeader
                segment={this.props.segment}
                active={this.state.active}
                onToggle={this.toggle}
                onSelect={this.onSelectSegment}
                updateSegment={this.props.updateSegment}
                activeTypes={this.props.activeTypes}
                highlight={
                    this.props.annotationClient.activeAnnotation &&
                    this.props.annotationClient.activeAnnotation.id ==
                        this.props.segment.id
                        ? true
                        : false
                }
            />
        );

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

        return (
            <div
                className={classNames(IDUtil.cssClassName('segment'))}
                id={ANNOTATION_COLUMN_SEGMENT_ID + this.props.segment.id}
            >
                {header}
                {types}
            </div>
        );
    }
}

Segment.propTypes = {
    annotationClient: PropTypes.object.isRequired,
    activeTypes: PropTypes.arrayOf(PropTypes.string).isRequired,
    segment: PropTypes.object,
    updateSegment: PropTypes.func.isRequired
};
