var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
import * as React from "react";
import * as PropTypes from "prop-types";
import * as _ from "lodash";
import "./SegmentedControl.less";
var propTypes = {
    className: PropTypes.string,
    defaultValue: PropTypes.string,
    disabled: PropTypes.bool,
    options: PropTypes.arrayOf(PropTypes.shape({
        content: PropTypes.node.isRequired,
        disabled: PropTypes.bool,
        value: PropTypes.any.isRequired,
    })).isRequired,
    onSelect: PropTypes.func,
    value: PropTypes.any,
};
export var cssClass = {
    CONTAINER: "segmented_control",
    DISABLED: "segmented_control--selectable-item--disabled",
    OPTION: "segmented_control--selectable-item",
    SELECTED: "segmented_control--selectable-item--selected",
};
/**
 * SegmentedControl selection. Shows several options as defined in the props and
 * allows the user to select one of those options.
 */
var SegmentedControl = /** @class */ (function (_super) {
    __extends(SegmentedControl, _super);
    function SegmentedControl(props) {
        var _this = _super.call(this, SegmentedControl.validateProps(props)) || this;
        _this.state = { selected: props.defaultValue || null };
        return _this;
    }
    SegmentedControl.validateProps = function (props) {
        var defaultValue = props.defaultValue, onSelect = props.onSelect, value = props.value;
        if (value && defaultValue) {
            throw new Error("SegmentedControl must either be controlled or uncontrolled " +
                "(specify either the `value` prop, or the `defaultValue` prop, but not both).\n" +
                "More info: https://fb.me/react-controlled-components");
        }
        if (value && !onSelect) {
            throw new Error("`onSelect` prop required when using SegmentedControl as a controlled component. " +
                "Either provide the `onSelect` prop, or replace `value` with `defaultValue` for an " +
                "uncontrolled SegmentedControl.\n" +
                "More info: https://fb.me/react-controlled-components");
        }
        return props;
    };
    SegmentedControl.prototype.onSelect = function (_a) {
        var disabled = _a.disabled, value = _a.value;
        // TODO: We need to do an audit for SegmentedControl usage and figure out if we can safely get
        // rid of the uncontrolled mode (and stop tracking state internally) so we avoid this complexity
        // (or just make a breaking change).
        var previousValue = this.props.value || this.state.selected;
        if (disabled || this.props.disabled || value === previousValue) {
            return;
        }
        this.setState({ selected: value });
        if (this.props.onSelect) {
            this.props.onSelect(value);
        }
    };
    SegmentedControl.prototype.getValue = function () {
        return this.props.value || this.state.selected;
    };
    SegmentedControl.prototype.render = function () {
        var _this = this;
        var _a = this.props, className = _a.className, disabled = _a.disabled, options = _a.options, value = _a.value;
        var selected = value || this.state.selected;
        var idx = -1;
        var selectableItems = _.map(options, function (option) {
            var isSelected = option.value === selected;
            var classes = [cssClass.OPTION];
            if (isSelected) {
                classes.push(cssClass.SELECTED);
            }
            if (disabled || option.disabled) {
                classes.push(cssClass.DISABLED);
            }
            idx = idx + 1;
            return (React.createElement("button", { className: classes.join(" "), onClick: function () { return _this.onSelect(option); }, key: idx, type: "button" }, option.content));
        });
        return React.createElement("div", { className: [cssClass.CONTAINER, className].join(" ") }, selectableItems);
    };
    SegmentedControl.propTypes = propTypes;
    return SegmentedControl;
}(React.Component));
export { SegmentedControl };
