import React from 'react';
import { PillCloud, SkeletonLoader, PageHeader } from '@theorchard/suite-components';
import { useIdentity } from '@theorchard/suite-identity';
import { useIdentityResourceAccess } from '../../../queries/identityResourceAccess';
import { ResourceCard } from '../../resourceCard/resourceCard';
import type { PillProps } from '@theorchard/suite-components';

const CLASS_NAME = 'MainNavUserModalAccounts';

export const MainNavUserModalAccounts: React.FC = () => {
    const identity = useIdentity();
    const { data, loading } = useIdentityResourceAccess(identity.id);

    const renderAccountsRowContent = () => {
        if (!data || data.length === 0) return null;

        const accountPills: PillProps[] = data.map((resource) => ({
            brand: resource.brandName,
            text: resource.name,
            maxWidth: 180,
            popoverOptions: {
                id: `PillDemoPopover${resource.uuid}`,
                contentClassName: 'PillPopoverContentFewerPadding',
                content: <ResourceCard resource={resource} />,
            },
        }));

        return <PillCloud maxVisibleCount={3} pillsProps={accountPills} />;
    };

    return (
        <PageHeader.Row className={CLASS_NAME}>
            {loading ? (
                <SkeletonLoader shape="rounded" height={32} width={128} />
            ) : (
                renderAccountsRowContent()
            )}
        </PageHeader.Row>
    );
};