import React from "react";
import PropTypes from "prop-types";
import classNames from "classnames";
import IDUtil from "../../../util/IDUtil";
import Strings from "../_Strings";
import EditableText from "../../shared/EditableText";

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

    render() {
        return (
            <div
                className={classNames(
                    IDUtil.cssClassName("segment-layer-header"),
                    {
                        active: this.props.active,
                    }
                )}
                onClick={this.props.onToggle}
            >
                <span className="left">
                    <span
                        className="layer-icon"
                        title={Strings.ANNOTATION_TARGET_HELP_USER_SEGMENT}
                    />
                    <EditableText
                        value={this.props.title}
                        onChange={(value) => {
                            this.props.onChangeTitle(value);
                        }}
                    />
                </span>

                {/* Segment count */}
                <span className="count">{this.props.count}</span>

                {/* Delete layer button */}
                <div
                    className="delete-layer-button"
                    title={Strings.BUTTON_DELETE_USER_LAYER_HELP}
                    onClick={(e) => {
                        e.stopPropagation();
                        this.props.onDeleteLayer();
                    }}
                />
            </div>
        );
    }
}

SegmentLayerHeader.propTypes = {
    title: PropTypes.string.isRequired,
    onToggle: PropTypes.func.isRequired,
    active: PropTypes.bool.isRequired,
    onChangeTitle: PropTypes.func.isRequired,
    onDeleteLayer: PropTypes.func.isRequired,
};