import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Tooltip } from "@material-ui/core";
import styled from "styled-components";
import PathArrowSvg from "../../../assets/images/icons/path_arrow.svg";
import PathLineSvg from "../../../assets/images/icons/path_line.svg";
import { FlowConstants } from "../../CommonUI/FlowConstants";
export const StepConnectSection = styled.div `
    display: flex;
    flex-direction: row;
    ${(props) => props.setMinHeight &&
    `
		min-height: 10px;
	`}
`;
export const StepConnect = styled.div `
    display: flex;
    position: relative;
    width: 100%;
`;
export const StepConnectImageDiv = styled.div `
    margin-top: 4px;
    margin-bottom: 4px;
    margin-left: 18px;
    margin-right: 10px;

    display: flex;
    align-items: flex-end;

    min-height: ${(props) => props.height || 8}px;
    width: 8px;
    min-width: 8px;
    max-width: 8px;

    background-image: url(${PathLineSvg});
    background-size: 100% auto;

    position: relative;
`;
export const StepConnectOtherPaths = styled.div `
    flex-direction: column;
    justify-content: space-around;
    display: flex;

    top: 0;
    right: -10px;
    position: absolute;
    height: 100%;
`;
const RegularStepPathTitleDiv = styled.div `
    font-family: Inter;
    font-style: normal;
    font-weight: 500;
    font-size: 10px;
    line-height: 140%;

    color: ${FlowConstants.NEXT_STEP_PATH_TITLE_COLOR};
    text-transform: capitalize;

    display: flex;
    align-items: center;
    height: 100%;
    cursor: pointer;

    &:hover {
        color: #249169;
    }
`;
export const RegularStepPath = (props) => {
    const PathWithLabel = (_jsxs(_Fragment, { children: [_jsx(StepConnectImageDiv, Object.assign({ height: props.title || props.renderUI ? 24 : undefined }, { children: _jsx("img", { src: PathArrowSvg, width: 8, height: 5, alt: "Path" }, void 0) }), void 0),
            props.title && (_jsx(Tooltip, Object.assign({ title: props.tooltipTitle }, { children: _jsx(RegularStepPathTitleDiv, Object.assign({ onClick: (event) => props.onTitleClick(event.currentTarget) }, { children: props.title }), void 0) }), void 0))] }, void 0));
    return (_jsxs(StepConnect, Object.assign({ "data-testid": `step_${props.step._id}_connect` }, { children: [PathWithLabel, props.renderUI && props.renderUI()] }), void 0));
};
//# sourceMappingURL=StepPath.js.map