import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import { Button, Input, VSelectBox, SelectStack } from "@vertesia/ui/core";
import { getAuth } from "firebase/auth";
import { useEffect, useState } from "react";
const companySizeOptions = [
    { id: 1, label: "1-10 employees" },
    { id: 11, label: "11-100 employees" },
    { id: 101, label: "101-1000 employees" },
    { id: 1001, label: "1001-5000 employees" },
    { id: 5001, label: "5000+ employees" },
];
const accountTypeOptions = [
    {
        id: "personal",
        label: "Personal",
        description: "For personal use, or for a small team.",
    },
    {
        id: "company",
        label: "Company",
        description: "For a company or organization.",
    },
];
const projectMaturityOptions = [
    { id: "testing", label: "Just Testing or Evaluating LLMs" },
    { id: "exploring", label: "Actively Exploring LLMs on a Project" },
    { id: "using", label: "Already Using LLMs in Production" },
    { id: "migrating", label: "Migrating to different LLMs" },
    { id: "other", label: "Other" },
];
export default function SignupForm({ onSignup, goBack }) {
    const [accountType, setAccountType] = useState(undefined);
    const [companySize, setCompanySize] = useState(undefined);
    const [companyName, setCompanyName] = useState(undefined);
    const [companyWebsite, setCompanyWebsite] = useState(undefined);
    const [projectMaturity, setProjectMaturity] = useState(undefined);
    const [fbUser, setFbUser] = useState(undefined);
    const [error, setError] = useState(undefined);
    const isCompany = accountType === "company";
    useEffect(() => {
        const user = getAuth().currentUser;
        if (!user) {
            console.error('No user found');
            return;
        }
        setFbUser(user);
    }, [fbUser]);
    const isValid = () => {
        if (!accountType) {
            setError("Please select an account type");
            return false;
        }
        if (isCompany && !companyName) {
            setError("Please enter an organization name");
            return false;
        }
        if (isCompany && !companySize) {
            setError("Please select a company size");
            return false;
        }
        return true;
    };
    const onSubmit = async () => {
        if (!isValid())
            return;
        if (!accountType)
            return;
        const signupData = {
            accountType: accountType,
            companyName: companyName,
            companySize: companySize?.id,
            companyWebsite: companyWebsite,
            maturity: projectMaturity,
        };
        window.localStorage.setItem("composableSignupData", JSON.stringify(signupData));
        const fbToken = await getAuth().currentUser?.getIdToken();
        console.log('Got firebase token', getAuth(), fbToken);
        if (!fbToken) {
            console.error('No firebase token found');
            return;
        }
        onSignup(signupData, fbToken);
    };
    return (_jsxs("div", { className: "flex flex-col space-y-2", children: [_jsxs("div", { className: "prose", children: [_jsxs("p", { className: "prose text-sm text-muted pt-4", children: ["Welcome to Vertesia, ", fbUser?.displayName, " (", fbUser?.email, "). Please tell us a little bit about yourself and you'll be on your way. No credit card is required."] }), error &&
                        _jsx("div", { className: "text-destructive", children: error })] }), _jsx(FormItem, { label: "Account Type", children: _jsx(SelectStack, { options: accountTypeOptions, selected: accountTypeOptions.find((option) => option.id === accountType), onSelect: (option) => setAccountType(option.id) }) }), isCompany &&
                _jsxs(_Fragment, { children: [_jsx(FormItem, { label: "Company Size", children: _jsx(VSelectBox, { className: "w-full border border-accent bg-muted", value: companySize, options: companySizeOptions, onChange: setCompanySize, optionLabel: (option) => option?.label, placeholder: 'Select Company Size' }) }), _jsx(FormItem, { label: "Company Name", children: _jsx(Input, { value: companyName, onChange: setCompanyName, type: "text", required: true }) }), _jsx(FormItem, { label: "Company Website", children: _jsx(Input, { value: companyWebsite, onChange: setCompanyWebsite, type: "text" }) })] }), _jsx(FormItem, { label: "Project Maturity", children: _jsx(VSelectBox, { className: "w-full border border-accent bg-muted", options: projectMaturityOptions, value: projectMaturityOptions.find((option) => option.id === projectMaturity), optionLabel: (option) => option?.label, placeholder: 'Select Project Maturity', onChange: (option) => setProjectMaturity(option?.id) }) }), _jsxs("div", { className: "pt-8 flex flex-col", children: [_jsx(Button, { variant: "primary", onClick: onSubmit, size: "xl", children: _jsx("span", { className: "text-lg", children: "Sign Up" }) }), _jsx(Button, { variant: "ghost", size: "xl", className: "mt-4", onClick: goBack, children: _jsx("span", { className: "", children: "Wrong account, go back" }) })] })] }));
}
function FormItem({ label, children }) {
    return (_jsxs("div", { className: "flex flex-col space-y-2 pt-4", children: [_jsx("div", { className: "text-sm text-muted", children: label }), children] }));
}
//# sourceMappingURL=SignupForm.js.map