import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Col, Row } from "antd";
import { ContentLayout } from "../../../Components/ContentLayout";
import { ProgressButton } from "../../../Components/ProgressButton";
import { WhitelistPreview } from "../../../Components/WhitelistPreview";
import { useAppState } from "../../../overmind";
import { useState } from "react";
const HashtagSelector = () => {
    const state = useAppState();
    const [activeTags, setActiveTags] = useState([]);
    const username = state.flows.user.create.form.username;
    const generateMockWhitelist = () => {
        const mockUser = {
            username: "Hashtag",
        };
        const mockWhiteList = [];
        for (let i = 0; i < 64; i++) {
            mockWhiteList.push(mockUser);
        }
        return mockWhiteList;
    };
    return (_jsxs(ContentLayout, { children: [_jsx("p", { className: "super-size font-variant-none", style: { marginBottom: "40px" }, children: username || "username.io" }), _jsxs(Row, { className: "onboarding-selector-navigation", children: [_jsx(Col, { className: "onboarding-selector-info-title", children: _jsx("p", { className: "header-2b", children: "Select 8 or more hashtags you like" }) }), _jsx(Col, { children: _jsx(ProgressButton, { actionName: "api.user.create", type: "primary", htmlType: "submit", progressText: "Next step...", disabled: activeTags.length >= 8 ? false : true, onClick: () => { }, children: "Next" }) })] }), _jsx(Row, { style: { justifyContent: "space-between", width: "90%" }, children: generateMockWhitelist().map((user, i) => (_jsx(WhitelistPreview, { setActiveTags: setActiveTags, activeTags: activeTags, user: user.username + i }))) })] }));
};
export default HashtagSelector;
//# sourceMappingURL=HashtagSelector.js.map