import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { BannerHashtag } from "../../Components/TopHashtags";
import { Form, List, Row } from "antd";
import { ContentImage } from "../../Components/Image";
import { ItemGrid } from "../../Components/ItemGrid";
import { Link } from "react-router-dom";
import { fischerYates } from "../../utils/random";
import { useActions, useAppState } from "../../overmind";
import { useQuery } from "../../hooks/useQuery";
import { useEffect, useRef, useState } from "react";
export const useCreativeSearchQuery = () => {
    const query = useQuery();
    const tags = query.get("tags") ?? "";
    const index = Number(query.get("index") ?? 0);
    const aesthetics = query.get("aesthetics") ?? "";
    return { tags, aesthetics, index };
};
export const SearchTag = () => {
    const state = useAppState();
    const actions = useActions();
    const { tags, aesthetics } = useCreativeSearchQuery();
    const ref = useRef();
    const listState = state.lists.search.posts;
    const doSearch = actions.lists.searchPosts;
    const [tagNames, setTagNames] = useState([]);
    // const [_tags, _setTags] = useState([]);
    useEffect(() => {
        actions.routing.setBreadcrumbs([{ text: "Creative Search" }]);
        doSearch({ tags });
    }, [tags]);
    const search = (tags, aesthetics) => {
        if (tags === "") {
            return;
        }
        if (aesthetics === "") {
            actions.routing.historyPush({
                location: `/search?tags=${tags}`,
            });
        }
        else {
            actions.routing.historyPush({
                location: `/search?tags=${tags}&aesthetics=${aesthetics}`,
            });
        }
        actions.lists.searchPosts({ tags });
    };
    useEffect(() => {
        ref?.current?.focus();
    }, [ref?.current]);
    const maybeLoadMore = () => {
        actions.lists.searchPosts({ tags });
    };
    const [form] = Form.useForm();
    const lastQueried = listState.lastQueried;
    const items = state.lists.search.posts.results?.value || [];
    const suggestedTagsSources = fischerYates(items, 8) || [];
    useEffect(() => {
        if (!listState.query)
            setTagNames([]);
        form.setFieldsValue({ q: listState.lastQueried.tags });
        const tagsInSources = suggestedTagsSources
            .filter(Boolean)
            .map((p) => (p.tags || [])?.map((t) => t.value))
            .reduce((r, c) => [...r, ...c], []);
        const ts = fischerYates(tagsInSources, 12);
        setTagNames(ts);
        const tagsWithPics = suggestedTagsSources
            .filter(Boolean)
            .filter((p) => !!p.tags?.length)
            .map((p) => ({
            value: fischerYates(p.tags, 1).values,
            contentUrl: p.contentUrl,
        }));
    }, [items]);
    // if(true)
    //   return <>hello search</>
    return (_jsxs("div", { children: [items?.length ? (_jsxs(_Fragment, { children: [_jsx(Row, { style: { width: "100%" }, children: _jsxs("p", { className: "header-2 u-margin-bottom-medium", children: ["#", listState.lastQueried.tags.split(/,/).map((aesthetic) => (_jsx("span", { className: "u-margin-left-small", children: aesthetic })))] }) }), _jsx("div", { children: _jsx(BannerHashtag, { items: suggestedTagsSources, tagNames: tagNames, gridRow: 3, limit: 3 }) })] })) : (_jsx(_Fragment, {})), _jsx(ItemGrid, { items: items, render: (m, index) => (_jsx("div", { children: _jsx(Link, { to: `/tags/${tags}/${m.id}`, children: _jsx(ContentImage, { ...m, style: { aspectRatio: "1/1" } }) }) })), loadMore: maybeLoadMore, noEmptyResults: true }), state.indicators.isWorking || items.length || !lastQueried ? (_jsx(BannerHashtag, { items: suggestedTagsSources, tagNames: tagNames, gridRow: 3, limit: 3 })) : !items.length && lastQueried ? (_jsx(List, { size: "large", dataSource: [], loading: state.indicators.isWorking, locale: {
                    emptyText: lastQueried.tags === "" ? "Search for something!" : `No results for '${lastQueried.tags}'`,
                } })) : ("")] }));
};
export default SearchTag;
//# sourceMappingURL=TagSearch.js.map