import React__default, { useRef, useState, useEffect } from 'react';
import { Wrapper, Indicator } from './styles.js';
import { getId, noop } from '../../utils/index.js';
import { Segment } from './components/segment/Segment.js';

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 = noop, segmentList, size = 'large', segmentPadding, } = props;
    const wrapperRef = useRef(null);
    const appendTestId = getId(props['data-testid']);
    const [activeRef, setActiveRef] = useState();
    const [indicatorValues, setIndicatorValues] = useState({
        height: size === 'small' ? HEIGHT_SMALL : HEIGHT_LARGE,
        left: 0,
        width: 0,
    });
    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.createElement(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.createElement(Segment, { key: segment.value, segment: segment, active: active.value === segment.value, size: size, setActiveRef: setActiveRef, segmentPadding: getSegmentPadding(segmentPadding, size), onChange: onClick }))),
        React__default.createElement(Indicator, { width: indicatorValues.width, left: indicatorValues.left, height: indicatorValues.height, title: active.tooltip, "data-testid": appendTestId('indicator') },
            active.icon && active.icon,
            active.label)));
}

export { SegmentedControl };
