"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.RenderStepPath = exports.StepConnectOtherPaths = exports.StepConnectImageDiv = exports.StepConnect = exports.StepConnectSection = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const core_1 = require("@material-ui/core");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const path_arrow_svg_1 = tslib_1.__importDefault(require("../../../assets/images/icons/path_arrow.svg"));
const path_line_svg_1 = tslib_1.__importDefault(require("../../../assets/images/icons/path_line.svg"));
const FlowConstants_1 = require("@appglue/common/dist/Flow/Utilities/FlowConstants");
exports.StepConnectSection = styled_components_1.default.div `
    display: flex;
    flex-direction: row;
    ${(props) => props.setMinHeight &&
    `
		min-height: 10px;
	`}
`;
exports.StepConnect = styled_components_1.default.div `
    display: flex;
    position: relative;
    width: 100%;
`;
exports.StepConnectImageDiv = styled_components_1.default.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(${path_line_svg_1.default});
    background-size: 100% auto;

    position: relative;
`;
exports.StepConnectOtherPaths = styled_components_1.default.div `
    flex-direction: column;
    justify-content: space-around;
    display: flex;

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

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

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

    &:hover {
        color: #249169;
    }
`;
const RenderStepPath = (props) => {
    const PathWithLabel = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(exports.StepConnectImageDiv, { height: props.title || props.renderUI ? 24 : undefined, children: (0, jsx_runtime_1.jsx)("img", { src: path_arrow_svg_1.default, width: 8, height: 5, alt: "Path" }) }), props.title && ((0, jsx_runtime_1.jsx)(core_1.Tooltip, { title: props.tooltipTitle, children: (0, jsx_runtime_1.jsx)(RegularStepPathTitleDiv, { onClick: (event) => props.onTitleClick(event.currentTarget), children: props.title }) }))] }));
    return ((0, jsx_runtime_1.jsxs)(exports.StepConnect, { "data-testid": `step_${props.step._id}_connect`, children: [PathWithLabel, props.renderUI && props.renderUI()] }));
};
exports.RenderStepPath = RenderStepPath;
//# sourceMappingURL=RenderStepPath.js.map