'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');
var styles = require('./styles.js');
var index = require('../../utils/index.js');
var Segment = require('./components/segment/Segment.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

const PADDING_LARGE = '6px 60px';
const PADDING_SMALL = '2px 62px';
const HEIGHT_SMALL = 28;
const HEIGHT_LARGE = 44;
function getSegmentPadding(propPadding, size) {
    if (propPadding)
        return propPadding;
    return size === 'small' ? PADDING_SMALL : PADDING_LARGE;
}
function SegmentedControl(props) {
    const { active, className, onClick = index.noop, segmentList, size = 'large', segmentPadding, } = props;
    const wrapperRef = React.useRef(null);
    const appendTestId = index.getId(props['data-testid']);
    const [activeRef, setActiveRef] = React.useState();
    const [indicatorValues, setIndicatorValues] = React.useState({
        height: size === 'small' ? HEIGHT_SMALL : HEIGHT_LARGE,
        left: 0,
        width: 0,
    });
    React.useEffect(() => {
        if (activeRef && activeRef.current) {
            setIndicatorValues({
                left: activeRef.current.offsetLeft,
                width: activeRef.current.offsetWidth,
                height: activeRef.current.offsetHeight,
            });
        }
    }, [wrapperRef.current, activeRef === null || activeRef === void 0 ? void 0 : activeRef.current, segmentList, size]);
    return (React__default['default'].createElement(styles.Wrapper, { className: className, ref: wrapperRef, height: size === 'small' ? HEIGHT_SMALL : HEIGHT_LARGE, "data-testid": props['data-testid'], "data-trackid": props['data-trackid'] },
        segmentList.map((segment) => (React__default['default'].createElement(Segment.Segment, { key: segment.value, segment: segment, active: active.value === segment.value, size: size, setActiveRef: setActiveRef, segmentPadding: getSegmentPadding(segmentPadding, size), onChange: onClick }))),
        React__default['default'].createElement(styles.Indicator, { width: indicatorValues.width, left: indicatorValues.left, height: indicatorValues.height, title: active.tooltip, "data-testid": appendTestId('indicator') },
            active.icon && active.icon,
            active.label)));
}

exports.SegmentedControl = SegmentedControl;
