import React from 'react';
import { formatMessage } from '@theorchard/suite-i18n';
import { CompanyIcon } from '@theorchard/suite-icons';
import { useIdentity } from '@theorchard/suite-identity';
import cx from 'classnames';
import { InternalUserCard } from '../mainNav/mainNavUserModal/internalUserCard';
import { TextLabelField } from '../mainNav/textLabelField';
import type { BrandResource } from '../../types';

export const CLASS_NAME = 'ResourceCard';

interface Props {
    className?: string;
    testId?: string;
    resource: BrandResource;
}
export const ResourceCard: React.FC<Props> = ({ className, testId = CLASS_NAME, resource }) => {
    const identity = useIdentity();

    return (
        <div className={cx(CLASS_NAME, className)} data-testid={testId}>
            <div className={`${CLASS_NAME}-name`}>
                {resource.brandName && <CompanyIcon name={resource.brandName} />}
                <h4>{`${resource.name} · ${resource.id}`}</h4>
            </div>
            <p className={`${CLASS_NAME}-type`}>{resource.typeDisplayName}</p>

            {identity.isEmployee && resource.parentBrandDisplayName && resource.serviceTierName && (
                <InternalUserCard>
                    <div className="d-flex flex-row">
                        <TextLabelField
                            className="flex-grow-1"
                            label={formatMessage('account_parentCompany')}
                            value={resource.parentBrandDisplayName}
                        />
                        <TextLabelField
                            className="flex-grow-1"
                            label={formatMessage('account_serviceTier')}
                            value={resource.serviceTierName}
                        />
                    </div>
                </InternalUserCard>
            )}
        </div>
    );
};