import type { FC } from 'react';
import React from 'react';
import { BsOverlayTrigger, BsPopover, SkeletonLoader } from '@theorchard/suite-components';
import { formatMessage } from '@theorchard/suite-i18n';
import { GlyphIcon } from '@theorchard/suite-icons';
import { NavIcon } from '@theorchard/suite-icons';
import cx from 'classnames';
import { AppGridButton } from './appGridButton';
import type { Application } from '@theorchard/suite-identity';

const CLASSNAME = 'AppSwitcher';
const POPOVER_ID = 'AppSwitcherPopover';
const POPOVER_CLASSNAME = 'AppGrid';
const TERM_APPS = 'navigation_apps';

export interface Props {
    applications: Application[];
    loading?: boolean;
    asNavLink?: boolean;
}

export const AppSwitcher: FC<Props> = ({ applications, loading, asNavLink }) => (
    <BsOverlayTrigger
        placement="top"
        trigger="click"
        rootClose
        overlay={
            <BsPopover id={POPOVER_ID}>
                <BsPopover.Content className={POPOVER_CLASSNAME}>
                    {loading && (
                        <>
                            <SkeletonLoader shape="square" width={100} height={100} />
                            <SkeletonLoader shape="square" width={100} height={100} />
                            <SkeletonLoader shape="square" width={100} height={100} />
                        </>
                    )}
                    {!loading &&
                        applications.map((app) => <AppGridButton key={app.id} app={app} />)}
                </BsPopover.Content>
            </BsPopover>
        }
    >
        <button className={cx(CLASSNAME, { NavLink: asNavLink })} data-testid={CLASSNAME}>
            {asNavLink ? (
                <>
                    <div className="NavLink-icon">
                        <GlyphIcon name="apps" size={24} />
                    </div>
                    <span className="NavLink-title">{formatMessage(TERM_APPS)}</span>
                </>
            ) : (
                <>
                    <NavIcon name="apps" />
                    {formatMessage(TERM_APPS)}
                </>
            )}
        </button>
    </BsOverlayTrigger>
);