import { Brokerize } from '@brokerize/client';
const brokerizeClient = new Brokerize({
	// API configuration
	basePath: BROKERIZE_API_URL /* https://api-preview.brokerize.com for our preview environment */,
	clientId: '<YOUR-API-CLIENT-ID>',
	cognito: {
		Endpoint: '<PROVIDED-COGNITO-ENDPOINT>',
		ClientId: '<PROVIDED-COGNITO-CLIENT-ID>',
		UserPoolId: '<PROVIDED-COGNITO-USERPOOL-ID>'
	},
	// provide global dependencies
	fetch: globalThis.fetch.bind(globalThis),
	createAbortController: () => new AbortController(),
	createWebSocket: (url, protocol) => new WebSocket(url, protocol)
});

const theme = {
	layout: 'columns',
	logoStyle: 'light',
	tokens: {
		'zl-primary-color': 'red',
		'zl-primary-bg-color': 'white',
		'zl-secondary-bg-color': 'var(--zl-color-gray-lighter)',
		'zl-outline-color': 'var(--zl-color-primary-light)',
		'zl-default-text-color': 'var(--zl-color-gray-darkest)',
		'zl-secondary-text-color': 'var(--zl-color-gray-darkest)',
		'zl-placeholder-text-color': 'var(--zl-color-gray-darker)',
		'zl-success-color': '#3db969',
		'zl-error-color': '#ff3e3e',
		'zl-buy-color': 'var(--zl-success-color)',
		'zl-sell-color': 'var(--zl-error-color)',
		'zl-app-font-size': 'var(--zl-font-size-sm, 1rem)',
		'zl-input-bg-color': 'var(--zl-primary-bg-color)',
		'zl-input-border-color': 'var(--zl-default-border-color)',
		'zl-notification-info-color': 'var(--zl-color-gray-darkest)',
		'zl-notification-info-color': 'var(--zl-color-gray-darkest)',
		'zl-notification-bg-color': 'var(--zl-color-lightest)',
		'zl-form-item-gap': 'var(--zl-spacing-02) var(--zl-spacing-03)',
		'zl-form-item-error-border-width': '0px'
};

const apiCtx = await this.client.createAuthorizedContext(authCtxCfg);

createBrokerList({
	authorizedApiContext,
	theme,
	addFrame,
	renderTo,
	onLogin({ brokerName }) {
		// show the login process for broker `brokerName` here
	},
	openExternalLink
});

createBrokerLoginForm({
    authorizedApiContext,
    theme,
	addFrame,
    renderTo,
    brokerName,
    performOAuthRedirect({ url }) {
        /*
           if the broker login is implemented using OAuth redirects,
           this callback will be called with the URL to redirect to.
           After login, the client will redirect back to the configurated application URL.

           After that redirect, the client application must use `confirmOAuth` to confirm
           the session.
        */
    },
	onExit: ({ loggedIn }) => {
		/* application can handle a successful broker login (e.g. show a SessionsTable or PortfolioTable) */
	},
	openExternalLink
}

const user = await brokerizeClient.createGuestUser();
const apiCtx = brokerizeClient.createAuthorizedContext(user);

createBrokerizeMain({
	authorizedApiContext,
	theme,
	renderTo,
	addFrame,
	useNavigation: true,
	onNavigationStateChange(state) {
		// react to interanal navigation changes
	},
	openExternalLink
});

createCancelOrderForm({
	authorizedApiContext,
	theme,
	addFrame,
	renderTo,
	sessionId,
	onExit({ canceled }) {
		/* when the process is completed or aborted (can be used to remove the view) */
	},
	openExternalLink
});

createChangeOrderForm({
	authorizedApiContext,
	theme,
	addFrame,
	renderTo,
	orderId,
	onExit() {
		/* when the process is completed or aborted (can be used to remove the view) */
	},
	openExternalLink
});

createOrderForm({
	authorizedApiContext,
	theme,
	addFrame,
	renderTo: document.getElementById('orderFormArea'),
	isin: 'DE0007493991',
	portfolioId: '<portfolioId>',
	onOrderCreated(response) {
		/* for example, show the order receipt after creation. */
	},
	openExternalLink
	// quotesProvider
});

createOrderReceipt({
	authorizedApiContext,
	theme,
	addFrame,
	renderTo: document.getElementById('area'),
	orderId,
	openExternalLink
});

createOrderTable({
	authorizedApiContext,
	theme,
	addFrame,
	renderTo,
	portfolioId,
	openExternalLink
});

createPortfolioTable({
	authorizedApiContext,
	theme,
	addFrame,
	renderTo,
	onNavigate(portfolio: { id, portfolioName, ... }) {},
	openExternalLink
});

createPositionsTable({
	authorizedApiContext,
	theme,
	addFrame,
	renderTo,
	portfolioId,
	onTradeInstrument: (opts: {
		isin: string;
		direction: Direction
	}) => void,
	openExternalLink
});

createSessionsTable({
	authorizedApiContext,
	theme,
	addFrame,
	renderTo,
	onEnableSessionTan({ sessionId }) {
		/* here: show the enable session tan form */
	},
	openExternalLink
});

createSessionTanForm({
	authorizedApiContext,
	addFrame,
	theme,
	renderTo,
	sessionId,
	onExit({ canceled }) {
		/* when the process is completed or aborted (can be used to remove the view) */
	},
	openExternalLink
});

// in your page, put sth like <div id="brokerize-modal"></div> at the end of your page (this makes sure our modal will be topmost)
const renderTo = document.getElementById('brokerize-modal');
const modalHost = createModalHost{
	authorizedApiContext,
	theme,
	renderTo
});

/* whenever you recreate the modal host (e.g. when the authorizedApiContext must be replaced), make sure to destroy the existing one first,
   as only one modal host is allowed globally at any given time. */
// modalHost.destroy();

import { modalService } from '@brokerize/elements';

modalService.override(...);

export declare interface ModalService {
	showSecurityInformation(title: string, content: string): void;
	showConfirm(msg: string): Promise<boolean>;
	showSessionTanModal(sessionId: string): void;
	setActivated(): void;
	override(overrides: Partial<ModalService>): void;
	showReceipt(data: ReceiptData, showActions: boolean, handleOrderTableAction: (e: any) => void): void;
	showDetailedTable(table: Models.GenericTable): void;
	showPositionDetail(
		position: Models.Position,
		row?: TableRow,
		header?: Header,
		handleTableAction?: (actionId: string, rowId: string) => void
	): void;
}