"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 Bluebird = require("bluebird");
const tempseal_1 = require("@sealcode/tempseal");
let BlogNewsTiles;
BlogNewsTiles = (add_effect, config, tiles) => __awaiter(void 0, void 0, void 0, function* () {
    console.log("blog tiles start");
    const icon_url = yield (yield add_effect(yield tempseal_1.SideEffects.File.fromPath(path_1.resolve(__dirname, "clock.svg")))).getUrlPlaceholder();
    const tile_htmls = yield Bluebird.map(tiles.filter(e => e), function (tile) {
        return __awaiter(this, void 0, void 0, function* () {
            const [thumbnail_html, avatar_html] = yield Promise.all([
                tempseal_1.SideEffects.ResponsiveImage(add_effect, {
                    image_path: tile.imagePath,
                    sizes_attr: "(max-width: 448px) 100vw, (max-width: 500px) calc(100vw - 88px), (max-width: 711px) 418px, (max-width: 950px) calc( (100vw - 3rem) / 2 ), (max-width: 1040px) 418px, 352px",
                    alt: tile.imageAlt,
                }),
                tempseal_1.SideEffects.ResponsiveImage(add_effect, {
                    image_path: tile.avatarPath,
                    resolutions: [56, 28],
                    sizes_attr: "28px",
                    alt: "Avatar",
                }),
            ]);
            return /* HTML */ `
				<article class="blog-news-tiles__tile">
					<a href="${tile.url}" class="blog-news-tiles__image">
						${thumbnail_html}
					</a>
					<span class="blog-news-tiles__reading-time">
						<img src="${icon_url}" alt="" />
						${tile.readingTime}
					</span>
					<a href="${tile.url}" class="blog-news-tiles__title">
						${tile.title}
					</a>
					<div class="blog-news-tiles__description">
						<span class="blog-news-tiles__author">
							${avatar_html} by ${tile.author}
						</span>
						<span class="blog-news-tiles__date">
							${tile.date}
						</span>
					</div>
				</article>
			`;
        });
    });
    const html = /* HTML */ `
		<section class="blog-news-tiles">${tile_htmls.join("\n")}</section>
	`;
    yield Promise.all([
        tempseal_1.SideEffects.Scss.addFromPath(add_effect, config, path_1.resolve(__dirname, "blog-news-tiles.scss")),
        add_effect(new tempseal_1.SideEffects.HtmlChunk(html)),
    ]);
    console.log("blog items end");
});
BlogNewsTiles.identifier = "blog-news-tiles";
exports.default = BlogNewsTiles;
//# sourceMappingURL=blog-news-tiles.js.map