import { useEnvironment } from "../../contexts/EnvironmentContext.js";
import { localizationKeys } from "../../localization/localizationKeys.js";
import { useUserProfileContext } from "../../contexts/components/UserProfile.js";
import { descriptors } from "../../customizables/elementDescriptors.js";
import { useCardState, withCardStateProvider } from "../../elements/contexts/index.js";
import { Col } from "../../customizables/index.js";
import { Card } from "../../elements/Card/index.js";
import { Header } from "../../elements/Header.js";
import { ConnectedAccountsSection } from "./ConnectedAccountsSection.js";
import { EmailsSection } from "./EmailsSection.js";
import { EnterpriseAccountsSection } from "./EnterpriseAccountsSection.js";
import { PhoneSection } from "./PhoneSection.js";
import { UsernameSection } from "./UsernameSection.js";
import { UserProfileSection } from "./UserProfileSection.js";
import { Web3Section } from "./Web3Section.js";
import { useUser } from "@clerk/shared/react";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";

//#region src/components/UserProfile/AccountPage.tsx
const AccountPage = withCardStateProvider(() => {
	const { attributes, social, enterpriseSSO } = useEnvironment().userSettings;
	const card = useCardState();
	const { user } = useUser();
	const { shouldAllowIdentificationCreation } = useUserProfileContext();
	const showUsername = attributes.username?.enabled;
	const showEmail = attributes.email_address?.enabled;
	const showPhone = attributes.phone_number?.enabled;
	const showConnectedAccounts = social && Object.values(social).filter((p) => p.enabled).length > 0;
	const showEnterpriseAccounts = user && enterpriseSSO.enabled;
	const showWeb3 = attributes.web3_wallet?.enabled;
	return /* @__PURE__ */ jsx(Col, {
		elementDescriptor: descriptors.page,
		sx: (t) => ({
			gap: t.space.$8,
			color: t.colors.$colorForeground
		}),
		children: /* @__PURE__ */ jsxs(Col, {
			elementDescriptor: descriptors.profilePage,
			elementId: descriptors.profilePage.setId("account"),
			children: [
				/* @__PURE__ */ jsx(Header.Root, { children: /* @__PURE__ */ jsx(Header.Title, {
					localizationKey: localizationKeys("userProfile.start.headerTitle__account"),
					sx: (t) => ({ marginBottom: t.space.$4 }),
					textVariant: "h2"
				}) }),
				/* @__PURE__ */ jsx(Card.Alert, { children: card.error }),
				/* @__PURE__ */ jsx(UserProfileSection, {}),
				showUsername && /* @__PURE__ */ jsx(UsernameSection, {}),
				showEmail && /* @__PURE__ */ jsx(EmailsSection, { shouldAllowCreation: shouldAllowIdentificationCreation }),
				showPhone && /* @__PURE__ */ jsx(PhoneSection, { shouldAllowCreation: shouldAllowIdentificationCreation }),
				showConnectedAccounts && /* @__PURE__ */ jsx(ConnectedAccountsSection, { shouldAllowCreation: shouldAllowIdentificationCreation }),
				showEnterpriseAccounts && /* @__PURE__ */ jsx(EnterpriseAccountsSection, {}),
				showWeb3 && /* @__PURE__ */ jsx(Web3Section, { shouldAllowCreation: shouldAllowIdentificationCreation })
			]
		})
	});
});

//#endregion
export { AccountPage };
//# sourceMappingURL=AccountPage.js.map