import React from 'react';
import { withFocusable } from '../../common/Focusable';
import { ChevronRight } from '@wix/wix-ui-icons-common';
import Text from '../../Text';
import StepMarker from './StepMarker';
import { Type, StepType, DataHook } from '../constants';
import { st, classes } from './Step.st.css.js';
import { IconThemeContext } from '../../WixDesignSystemIconThemeProvider/IconThemeContext';
class Step extends React.PureComponent {
    constructor() {
        super(...arguments);
        this.state = {
            isHovered: false,
            // Used to update <Text ellipsis> when CSS transition has ended
            // (otherwise the logic to show/hide tooltip will not be applied)
            transitionSequence: 1,
        };
        this._handleMouseEnter = () => {
            this.setState({ isHovered: true });
        };
        this._handleMouseLeave = () => {
            this.setState({ isHovered: false });
        };
        this._handleTransitionEnd = event => {
            const { transitionSequence } = this.state;
            if (event.propertyName === 'flex-shrink') {
                this.setState({ transitionSequence: transitionSequence + 1 });
            }
        };
        this._handleClick = () => {
            this._isClickable() && this.props.onClick();
        };
        this._isClickable = () => {
            const { onClick, type, active } = this.props;
            return type !== StepType.Disabled && !active && !!onClick;
        };
        this._getFocusProps = () => {
            const { onClick, focusableOnFocus, focusableOnBlur, type } = this.props;
            if (onClick && type !== StepType.Disabled) {
                return {
                    onFocus: focusableOnFocus,
                    onBlur: focusableOnBlur,
                    tabIndex: 0,
                };
            }
            return { tabIndex: -1 };
        };
    }
    render() {
        const { type, styleType, active, last, number, text, className, size, ...otherProps } = this.props;
        const { isHovered, transitionSequence } = this.state;
        const isClickable = this._isClickable();
        return (React.createElement(IconThemeContext.Consumer, null, ({ icons: themeIcons = {} }) => {
            const icons = {
                ChevronRight: themeIcons.Step?.ChevronRight || ChevronRight,
            };
            return (React.createElement("button", { className: st(classes.root, {
                    type,
                    styleType,
                    size,
                    selected: active,
                    hovered: isHovered,
                    clickable: isClickable,
                }, className), "data-hook": DataHook.Step, "data-type": type, "data-size": size, "data-active": active, onMouseEnter: this._handleMouseEnter, onMouseLeave: this._handleMouseLeave, onClick: this._handleClick, onTransitionEnd: this._handleTransitionEnd, ...this._getFocusProps() },
                React.createElement("div", { className: classes.content },
                    React.createElement(StepMarker, { number: number, active: active, type: type, styleType: styleType, hovered: isHovered && isClickable, className: classes.marker }),
                    React.createElement(Text, { key: transitionSequence, ellipsis: true, weight: "thin", size: size, showTooltip: !active, dataHook: DataHook.StepText, className: classes.text }, text)),
                !last && React.createElement(icons.ChevronRight, { className: classes.arrow })));
        }));
    }
}
Step.displayName = 'Step';
Step.defaultProps = {
    type: StepType.Normal,
};
export default withFocusable(Step);
//# sourceMappingURL=Step.js.map