import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Col } from "antd";
import { ContentImage } from "./Image";
import { ItemGrid } from "./ItemGrid";
import { Link } from "react-router-dom";
import { Row } from "antd-latest";
import { fischerYates } from "../utils/random";
import { useActions, useAppState } from "../overmind";
import { useEffect, useRef, useState } from "react";
import Title from "../Pages/Explore/Title";
const TopHashtags = ({ maxItems, title, posts, skipItems, maxPostsToShow }) => {
    const state = useAppState();
    const actions = useActions();
    const [tagNames, setTagNames] = useState([]);
    const [tagImages, setTagImages] = useState([]);
    const items = useRef(state.lists.search.posts.results?.value || []).current;
    maxItems = maxItems || 100;
    useEffect(() => {
        actions.lists.searchPosts({
            tags: "fashion, art, architecture, hat",
        });
    }, []);
    const suggestedTagsSources = fischerYates(items, 8) || [];
    useEffect(() => {
        const tagsInSources = items
            .filter(Boolean)
            .map((p) => (p.tags || [])?.map((t) => t.value))
            .reduce((r, c) => [...r, ...c], []);
        const ts = fischerYates(tagsInSources);
        setTagNames(ts);
        const tagsWithPics = suggestedTagsSources
            .filter(Boolean)
            .filter((p) => !!p.tags?.length)
            .map((p) => ({
            value: fischerYates(p.tags, 1).values,
            contentUrl: p.contentUrl,
        }));
        const tp = fischerYates(tagsWithPics, 6);
        setTagImages(tp);
    }, [items]);
    const maybeLoadMore = () => {
        actions.lists.searchPosts({
            tags: "fashion, art, architecture, hat",
        });
    };
    return (_jsxs("div", { children: [title === undefined ? (_jsx(Row, { style: { width: "100%" }, children: _jsx("p", { className: "header-2 u-margin-bottom-medium", children: "Explore top hashtags" }) })) : (_jsx(Title, { title: title, href: "/top/hashtags" })), _jsx(BannerHashtag, { items: items, tagNames: tagNames, gridRow: 3, limit: state.routing.location !== "/top/hashtags" ? 6 : undefined })] }));
};
export const BannerHashtag = ({ items, tagNames, limit, gridRow }) => (_jsx(ItemGrid, { items: items, limit: limit, gridRow: gridRow, wrapAt: 3, render: (m, index) => (_jsx(Link, { to: `/search?tags=${encodeURIComponent(tagNames[index])}`, style: { cursor: "pointer", width: "100%" }, children: _jsxs(Col, { style: {
                padding: 10,
                width: "100%",
                height: "155px",
            }, children: [_jsx("p", { className: "header-3", style: {
                        position: "absolute",
                        zIndex: 9999,
                        color: "#fff",
                        width: "100%",
                        top: "40%",
                    }, children: tagNames ? tagNames[index] : "" }), _jsx(ContentImage, { ...m, style: {
                        aspectRatio: "1/1",
                        position: "relative",
                        opacity: 0.4,
                    }, className: "post-rounded" })] }) })), noEmptyResults: true }));
export default TopHashtags;
//# sourceMappingURL=TopHashtags.js.map