import React from 'react';
import cx from 'classnames';
import { useAppContext } from '../../app/appContext';
import { hasAccess } from '../../utils';
import { AppSwitcher } from '../appSwitcher';
import { IntercomButton } from '../intercomButton';
import { ZendeskButton } from '../zendeskButton';
import type { AccessControlled } from '../../utils';

export interface MainNavFooterControlsProps<AppData = unknown> {
    loading?: boolean;
    enableIntercom?: boolean | AccessControlled<AppData>;
    enableZendesk?: boolean | AccessControlled<AppData>;
    enableAppSwitcher?: boolean | AccessControlled<AppData>;
}

const CLASS_NAME = 'MainNavFooterControls';

export function MainNavFooterControls<AppData>({
    loading,
    enableIntercom = false,
    enableZendesk = false,
    enableAppSwitcher = true,
}: MainNavFooterControlsProps<AppData>) {
    const context = useAppContext<AppData>();

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

    if (!showIntercomButton && !showZendeskButton && !showAppSwitcher) return null;

    const single =
        [showZendeskButton || showIntercomButton, showAppSwitcher].filter((value) => value)
            .length === 1;

    return (
        <div className={cx(CLASS_NAME, { single })}>
            {showIntercomButton && <IntercomButton />}
            {showZendeskButton && <ZendeskButton />}
            {showAppSwitcher && (
                <AppSwitcher applications={context.identity.applications ?? []} loading={loading} />
            )}
        </div>
    );
}