"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");
let NoticeBoard;
const renderContact = (add_effect, { href, name, icon_path, title }) => __awaiter(void 0, void 0, void 0, function* () {
    const icon = yield add_effect(yield tempseal_1.SideEffects.File.fromPath(icon_path));
    return /* HTML */ `
		<div class="notice-board__contact">
			<a
				class="notice-board__contact-icon"
				href="${href}"
				${title ? `title="${title}"` : ""}
			>
				<img
					src="${yield icon.getUrlPlaceholder()}"
					alt="${name}"
					height="100"
				/>
				<span>${name}</span>
			</a>
		</div>
	`;
});
NoticeBoard = (add_effect, config, { leftheader, rightheader, image_path, links, id }) => __awaiter(void 0, void 0, void 0, function* () {
    console.log(links);
    const html = /* HTML */ `
		<section class="nb-root">
			<div class="notice-board">
				${id
        ? `<div class="notice-board__anchor-point" id="${id}"></div>`
        : ""}
				<div class="notice-board__background">
					${yield tempseal_1.SideEffects.ResponsiveImage(add_effect, {
        image_path: image_path,
        alt: "Some alt text",
        resolutions: [800, 1000, 1200, 1500, 2000],
        sizes_attr: "100vw",
    })}
				</div>
				<div class="notice-board__body">
					<div class="notice-board__body-inner">
						<h2 class="notice-board__header-main">${leftheader}</h2>

						<p class="notice-board__header-minor">${rightheader}</p>
						<address class="notice-board__contacts">
							${(yield Promise.all(links.map((link) => renderContact(add_effect, link)))).join("")}
						</address>
					</div>
				</div>
			</div>
		</section>
	`;
    yield Promise.all([
        tempseal_1.SideEffects.Scss.addFromPath(add_effect, config, path_1.resolve(__dirname, "notice-board.scss")),
        add_effect(new tempseal_1.SideEffects.HtmlChunk(html)),
    ]);
});
NoticeBoard.identifier = "notice-board";
exports.default = NoticeBoard;
//# sourceMappingURL=notice-board.js.map