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 { TopCreators } from "../../../Components/Creators";
import { useActions, useAppState } from "../../../overmind";
import { useState } from "react";
const UserSelector = (props) => {
    const state = useAppState();
    const actions = useActions();
    const [addedUsers, setAddedUsers] = useState([]);
    const allowNext = addedUsers.length >= 8 ? true : false;
    const username = state.flows.user.create.form.username;
    const users = state.lists.top.users.items;
    const selectedUsers = users.filter((user) => addedUsers.includes(user.username || ""));
    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 people you like" }) }), _jsx(Col, { children: _jsx(ProgressButton, { actionName: "", type: "primary", htmlType: "submit", progressText: "Next step...", disabled: !allowNext, onClick: async () => await actions.api.user.powerUpMultiple({
                                users: selectedUsers,
                            }), children: "Next" }) })] }), _jsx(TopCreators, { title: "Explore top creators", users: users, buttonType: "addUser", setAddedUsers: setAddedUsers, addedUsers: addedUsers })] }));
};
export default UserSelector;
//# sourceMappingURL=UserSelector.js.map