import React from 'react';
import Text from '../Text';
import { classes, st } from './HorizontalTimeline.st.css.js';
import { classes as iconsClasses, st as iconSt, } from './HorizontalTimelineIcons.st.css.js';
import { dataHooks } from './constants';
import { StatusCompleteFilled, StatusAlertFilled, } from '@wix/wix-ui-icons-common';
class HorizontalTimeline extends React.PureComponent {
    constructor() {
        super(...arguments);
        this._renderLine = ({ skin, line }) => (React.createElement("div", { className: st(classes.line, { skin, line }) }));
        this._renderLabel = ({ label, index, labelEllipsis }) => {
            const { alignLabel } = this.props;
            return (React.createElement("div", { className: st(classes.label, { alignLabel }) },
                React.createElement(Text, { size: "tiny", ellipsis: labelEllipsis, dataHook: `${dataHooks.horizontalTimelineLabel}-${index}` }, label)));
        };
    }
    render() {
        const { items, dataHook, className, skin } = this.props;
        return (React.createElement("div", { className: st(classes.root, { skin }, className), "data-hook": dataHook, "data-skin": skin }, items.map(({ label, width = 'auto', skin: deprecatedSkin, icon = React.createElement(HorizontalTimeline.DefaultIcon, null), line = 'dashed', labelEllipsis = true, }, index) => {
            const nextItemSkin = (items[index + 1] && items[index + 1].skin) || 'light';
            const nextItemLine = (items[index + 1] && items[index + 1].line) || 'dashed';
            return (React.createElement("div", { className: classes.column, key: index, style: { width } },
                React.createElement("div", { className: st(classes.item) },
                    React.createElement("div", { className: classes.lineIconLine },
                        this._renderLine({ skin: deprecatedSkin, line }),
                        React.createElement("div", { className: classes.icon }, icon),
                        this._renderLine({
                            skin: nextItemSkin,
                            line: nextItemLine,
                        })),
                    this._renderLabel({ label, index, labelEllipsis }))));
        })));
    }
}
HorizontalTimeline.displayName = 'HorizontalTimeline';
HorizontalTimeline.DefaultIcon = ({ skin = 'dark' }) => (React.createElement("div", { className: iconSt(iconsClasses.upcomingIcon, { skin }) }));
HorizontalTimeline.ActiveIcon = ({ skin = 'dark' }) => (React.createElement("div", { className: iconSt(iconsClasses.activeIcon, { skin }) }));
HorizontalTimeline.BoundaryIcon = ({ skin = 'dark' }) => (React.createElement("div", { className: iconSt(iconsClasses.boundaryIcon, { skin }) }));
HorizontalTimeline.DestructiveIcon = () => (React.createElement(StatusAlertFilled, { className: iconsClasses.errorIcon }));
HorizontalTimeline.CompleteIcon = ({ skin = 'dark' }) => {
    const className = iconSt(iconsClasses.completeIcon, { skin });
    const standardSkin = React.createElement("div", { className: className });
    const darkSkin = React.createElement(StatusCompleteFilled, { className: className });
    return skin === 'standard' ? standardSkin : darkSkin;
};
HorizontalTimeline.defaultProps = {
    skin: 'dark',
    alignLabel: 'center',
    items: [],
};
export default HorizontalTimeline;
//# sourceMappingURL=HorizontalTimeline.js.map