import React, { useCallback, useState } from 'react';
import { withFocusable } from '../../common/Focusable';
import { ChevronRight } from '@wix/wix-ui-icons-common';
import Text from '../../Text';
import StepMarker from './StepMarker';
import { StepType, DataHook } from '../constants';
import { useHover } from '../../common/useHover';
import { st, classes } from './Step.st.css.js';
import { IconThemeContext } from '../../WixDesignSystemIconThemeProvider/IconThemeContext';
const Step = ({ type = StepType.Normal, styleType, active, last, number, text, className, size, onClick, focusableOnFocus, focusableOnBlur, }) => {
    const { hovered: isHovered, hoverProps } = useHover();
    // Used to update <Text ellipsis> when CSS transition has ended
    // (otherwise the logic to show/hide tooltip will not be applied)
    const [transitionSequence, setTransitionSequence] = useState(1);
    const isClickable = type !== StepType.Disabled && !active && !!onClick;
    const handleClick = useCallback(() => {
        if (isClickable) {
            onClick();
        }
    }, [isClickable, onClick]);
    const handleTransitionEnd = useCallback(event => {
        if (event.propertyName === 'flex-shrink') {
            setTransitionSequence(prev => prev + 1);
        }
    }, []);
    const focusProps = onClick && type !== StepType.Disabled
        ? {
            onFocus: focusableOnFocus,
            onBlur: focusableOnBlur,
            tabIndex: 0,
        }
        : { tabIndex: -1 };
    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, ...hoverProps, onClick: handleClick, onTransitionEnd: handleTransitionEnd, ...focusProps },
            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';
export default withFocusable(Step);
//# sourceMappingURL=Step.js.map