import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled from 'styled-components';
import { ArrowDownIcon } from '../../../CommonUI/Icon/ArrowDownIcon';
import { CloseRedIcon } from '../../../CommonUI/Icon/CloseRedIcon';
import { ErrorIcon } from '../../../CommonUI/Icon/ErrorIcon';
import { FlowStepSequenceStrategy } from '../../Structure/FlowStepSequence';
import { BaseSequenceStrategy } from '../BaseSequenceStrategy';
const FlowEndDiv = styled.div `
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	background: transparent;
	display: flex;
	flex-direction: column;
	align-items: center;
`;
const FlowEndLabelDiv = styled.div `
	background: #fff;
	border: 1px solid #F1F1F6;

	box-shadow: 0px 2px 4px -2px rgba(39, 41, 50, 0.04);
	border-radius: 27px;

	font-family: Inter;
	font-style: normal;
	font-weight: 500;
	font-size: 10px;
	line-height: 140%;

	color: #4050A6;
	cursor: pointer;

	display: flex;
	align-items: center;

	padding: 3px 0;
	position: relative;

	transition: border .1s ease-in-out;
	justify-content: center;

	width: 79px;

	&:hover {
		border: 1px solid #4050A6;
	}

	> img {
		margin-right: 3px;
	}
`;
const FlowEndInErrorDiv = styled.div `
	background: #fff;
	border: 1px solid #F1F1F6;

	box-shadow: 0px 2px 4px -2px rgba(39, 41, 50, 0.04);
	border-radius: 27px;

	font-family: Inter;
	font-style: normal;
	font-weight: 500;
	font-size: 10px;
	line-height: 140%;

	color: #EE3E54;
	cursor: pointer;

	display: flex;
	align-items: center;

	padding: 3px 0;

	transition: border .1s ease-in-out;
	justify-content: center;

	width: 116px;

	&:hover {
		border: 1px solid #EE3E54;
	}


	> img {
		margin-right: 3px;
	}
`;
const ErrorMesssgeIconButton = styled.div `
	position: absolute;
	left: calc(100% + 4px);
	top: 50%;
	transform: translateY(-50%);
	border-radius: 50%;
	border: 1px solid transparent;
	display: flex;
    align-items: center;
    justify-content: center;

	cursor: pointer;

	&:hover {
		border: 1px solid #EE3E54;
	}
`;
const FlowEndLineDiv = styled.div `
	width: 1px;
	height: 8px;
	background: #4050A6;
	border-radius: 1px;
	margin: 4px 0;
`;
export class RegularSequenceStrategy extends BaseSequenceStrategy {
    render() {
        var _a, _b;
        const { sequence } = this.props;
        if (!sequence.isNormal)
            return null;
        switch (sequence.strategy) {
            case FlowStepSequenceStrategy.ENDFLOW:
                return (_jsxs(FlowEndDiv, Object.assign({ id: (_a = sequence.hiddenStep.getOutcomeInstructions()[0]) === null || _a === void 0 ? void 0 : _a.getElementId() }, { children: [_jsx(FlowEndLineDiv, {}, void 0),
                        _jsxs(FlowEndLabelDiv, Object.assign({ onClick: this.showStrategyDialog, "data-testid": `${sequence._id}_end_flow` }, { children: [_jsx(ArrowDownIcon, {}, void 0), "End flow"] }), void 0)] }), void 0));
            case FlowStepSequenceStrategy.ENDFLOWINERROR:
                return (_jsxs(FlowEndDiv, Object.assign({ id: (_b = sequence.hiddenStep.getOutcomeInstructions()[0]) === null || _b === void 0 ? void 0 : _b.getElementId() }, { children: [_jsx(FlowEndLineDiv, {}, void 0),
                        _jsxs("div", Object.assign({ style: { position: 'relative' } }, { children: [_jsxs(FlowEndInErrorDiv, Object.assign({ onClick: this.showStrategyDialog, "data-testid": `${sequence._id}_error_flow` }, { children: [_jsx(CloseRedIcon, {}, void 0), "End flow in error"] }), void 0),
                                _jsx(ErrorMesssgeIconButton, Object.assign({ onClick: this.showErrorMessageForSequenceStrategy, "data-testid": `${sequence._id}_error_flow_set_message` }, { children: _jsx(ErrorIcon, {}, void 0) }), void 0)] }), void 0)] }), void 0));
            default:
                return null;
        }
    }
}
//# sourceMappingURL=SequenceStrategy.js.map