"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
Object.defineProperty(exports, "__esModule", { value: true });
const path_1 = require("path");
const tempseal_1 = require("@sealcode/tempseal");
const button_1 = require("../../elements/button/button");
const photo_in_logo_1 = require("../../elements/photo-in-logo/photo-in-logo");
const wave_1 = require("../../ornaments/wave/wave");
let WorkflowStep;
WorkflowStep = (add_effect, config, { number, title, content, button_primary, button_secondary, image_path, upper_color = "#5294a1", lower_color = "#488894", photo_direction = "right", flip_wave, id, }) => __awaiter(void 0, void 0, void 0, function* () {
    const html = /* HTML */ `
		<section
			class="workflow-step"
			style="background-image: linear-gradient(${upper_color} 70%, ${lower_color} 30%);"
		>
			${id
        ? `<div class="workflow-step__anchor-point" id="${id}"></div>`
        : ""}
			<div class="workflow-step__bg">
				${yield tempseal_1.embedComponent(add_effect, config, {
        flip_horizontally: flip_wave,
        rotated: false,
        wave_color: lower_color,
    }, wave_1.default)}
			</div>
			<div
				class="workflow-step__container ${number
        ? ""
        : "workflow-step__container--no-circle"}"
			>
				${number
        ? `
				<div class="workflow-step__upper-line"></div>
				<div class="workflow-step__circle-container">
					<span class="workflow-step__circle">` +
            number +
            `</span>
				</div>
				<div class="workflow-step__lower-line"></div>`
        : ""}
				<div class="workflow-step__title">
					<h2>
						${title || ""}
					</h2>
				</div>
				<div class="workflow-step__description">
					${content || ""}
				</div>

				<div class="workflow-step__buttons">
					${yield tempseal_1.embedComponent(add_effect, config, Object.assign(Object.assign({}, button_primary), { color: "primary" }), button_1.default)}
					${button_secondary
        ? yield tempseal_1.embedComponent(add_effect, config, Object.assign(Object.assign({}, button_secondary), { color: "primary" }), button_1.default)
        : ""}
				</div>

				${yield tempseal_1.embedComponent(add_effect, config, {
        direction: photo_direction,
        image_path,
    }, photo_in_logo_1.default)}
			</div>
		</section>
	`;
    yield Promise.all([
        tempseal_1.SideEffects.Scss.addFromPath(add_effect, config, path_1.resolve(__dirname, "workflow-step.scss")),
        add_effect(new tempseal_1.SideEffects.HtmlChunk(html)),
    ]);
});
WorkflowStep.identifier = "workflow-step";
exports.default = WorkflowStep;
//# sourceMappingURL=workflow-step.js.map