import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Col, Form, Row, Space, Tag, List } from "antd";
import { useEffect, useRef, useState } from "react";
import { useActions, useAppState } from "../../overmind";
import { ItemGrid } from "../../Components/ItemGrid";
import { useQuery } from "../../hooks/useQuery";
import { ContentImage } from "../../Components/Image";
import { Link } from "react-router-dom";
import { fischerYates } from "../../utils/random";
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 [suggestedTags, setSuggestedTags] = 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 || [];
    useEffect(() => {
        if (!listState.query)
            setSuggestedTags([]);
        form.setFieldsValue({ q: listState.lastQueried.tags });
        const suggestedTagsSources = fischerYates(items, 8) || [];
        const tagsInSources = suggestedTagsSources.filter(Boolean).map(p => (p.tags || [])?.map(t => t.value)).reduce((r, c) => [...r, ...c], []);
        const ts = fischerYates(tagsInSources, 16);
        setSuggestedTags(ts);
    }, [items]);
    // if(true)
    //   return <>hello search</>
    return (_jsxs("div", { children: [items?.length ?
                _jsxs(_Fragment, { children: [_jsxs("div", { style: {
                                marginBottom: 40,
                                maxWidth: "100vw",
                                overflow: "auto",
                                scrollbarWidth: "thin",
                            }, children: ["Searching for:\u00A0", _jsx(Space, { children: listState.lastQueried.tags.split(/,/).map((aesthetic) => (_jsx(Tag, { onClick: () => search(tags, aesthetic), style: { cursor: "pointer" }, children: aesthetic }))) })] }), _jsx("div", { children: 
                            // <Form
                            // 	form={form}
                            // 	style={{ width: "100%" }}
                            // 	name="basic"
                            // 	initialValues={{ q: lastQueried.tags || "fashion" }}
                            // 	onFinish={(e) => {
                            // 		search(e.q, "");
                            // 	}}
                            // 	autoComplete="off"
                            // >
                            _jsx(Row, { align: "middle", children: _jsx(Col, { md: 24, children: _jsx(Row, { gutter: 24, children: suggestedTags.map(t => (_jsxs(Col, { xs: 12, md: 6, children: [_jsx("div", { style: { marginBottom: 20 }, children: _jsx(Link, { to: `/search?tags=${t}`, style: {
                                                            fontSize: "0.9em",
                                                            padding: 12,
                                                            height: "100%",
                                                            display: "inline-block",
                                                            border: "1px solid white",
                                                            borderRadius: 32
                                                        }, children: _jsx("div", { children: t }) }) }), _jsx("p", {})] }))) }) }) }) })] })
                : _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(_Fragment, {})) : !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