import React, { useContext } from 'react';
import { IdentityContext } from '@theorchard/suite-identity';
import { Page } from '../../components/page';
import { AccountAuthDetails } from './components/authDetails';
import { AccountFeatures } from './components/features';
import { AccountIdentityDetails } from './components/identityDetails';
import { AccountResources } from './components/resources';
import { AccountRights } from './components/rights';
import { AccountSettings } from './components/settings';

export const AccountPage: React.FC = () => {
    const { identity } = useContext(IdentityContext);

    return (
        <Page className="AccountPage">
            <Page.Grid>
                <Page.Col md={6}>
                    {identity && (
                        <>
                            <AccountIdentityDetails />
                            <AccountSettings />
                        </>
                    )}
                    {!identity && <AccountAuthDetails />}
                </Page.Col>
                {identity && (
                    <Page.Col md={6}>
                        <AccountRights />
                        <AccountResources />
                        <AccountFeatures />
                    </Page.Col>
                )}
            </Page.Grid>
        </Page>
    );
};