import React from 'react';
import { useIdentity } from '@theorchard/suite-identity';
import { useAppContext } from '../../app/appContext';
import { FEATURE_ZENDESK_WIDGET_V2 } from '../../constants';
import { hasAccess, getIdentityFullName } from '../../utils';
import { AppSwitcher } from '../appSwitcher';
import { IntercomButton } from '../intercomButton';
import { ZendeskButton as ZendeskButtonV1, ZendeskButtonV2 } from '../zendeskButton';
import { MainNavFooterUserButton } from './mainNavFooterUserButton';
import { MainNavLink } from './mainNavLink';
import type { MainNavLinkOptions } from '../../types';
import type { AccessControlled } from '../../utils';

const CLASS_NAME = 'MainNavFooter';

export interface Props<AppData = unknown> {
    items?: MainNavLinkOptions<AppData>[];
    loading?: boolean;
    enableIntercom?: boolean | AccessControlled<AppData>;
    enableZendesk?: boolean | AccessControlled<AppData>;
    enableAppSwitcher?: boolean | AccessControlled<AppData>;
}

export function MainNavFooter<AppData>({
    items = [],
    loading,
    enableIntercom = false,
    enableZendesk = false,
    enableAppSwitcher = true,
}: Props<AppData>) {
    const context = useAppContext<AppData>();
    const identity = useIdentity();
    const userName = getIdentityFullName(identity);

    const showZendeskButton = hasAccess(enableZendesk, context);
    const showIntercomButton = !enableZendesk && hasAccess(enableIntercom, context);
    const showAppSwitcher = hasAccess(enableAppSwitcher, context);

    const ZendeskButton = identity.features[FEATURE_ZENDESK_WIDGET_V2]
        ? ZendeskButtonV2
        : ZendeskButtonV1;

    return (
        <footer className={CLASS_NAME} data-testid={CLASS_NAME}>
            {showIntercomButton && <IntercomButton asNavLink={true} />}
            {showZendeskButton && <ZendeskButton asNavLink={true} />}
            {showAppSwitcher && (
                <AppSwitcher
                    applications={context.identity.applications ?? []}
                    loading={loading}
                    asNavLink={true}
                />
            )}

            {items.map((item, index) => (
                <MainNavLink {...item} key={index} />
            ))}

            <MainNavFooterUserButton name={userName} picture={identity.picture} />
        </footer>
    );
}