import React from 'react';
import {
    MetadataList,
    Pill,
    Tag,
    PageHeader,
    Section,
} from '@theorchard/suite-components';
import { BrandIcon } from '@theorchard/suite-icons';
import './index.scss';

const BulkUploadHeader = ({
    bulkSessionId,
    vendorId,
    subaccountId,
    vendorName,
    subaccountName,
}: {
    bulkSessionId: string | null;
    vendorId?: number | null;
    vendorName?: string | null;
    subaccountId?: number | null;
    subaccountName?: string | null;
}) => {
    const brand = 'orchard';
    const isSubaccount = !!subaccountId;
    const accountId = isSubaccount ? subaccountId : vendorId;
    const accountName = isSubaccount ? subaccountName : vendorName;

    return (
        <div className="bulk-upload-header">
            <PageHeader
                mainContent={{
                    title: '',
                }}
                topMetadata={{
                    left: () => (
                        <>
                            <Tag
                                className="bulk-upload-header-tag"
                                variant="category"
                                iconName="digital"
                            >
                                {$t('bulkDigitalAudio.bulkUploadHeader.title')}
                            </Tag>
                            {bulkSessionId && (
                                <MetadataList
                                    className="bulk-upload-header-session-id"
                                    items={[
                                        {
                                            label: $t(
                                                'bulkDigitalAudio.bulkUploadHeader.sessionIdText'
                                            ),
                                            value: bulkSessionId,
                                            layout: 'horizontal',
                                        },
                                    ]}
                                />
                            )}
                        </>
                    ),
                    right: () => (
                        <div className="bulk-upload-header-pill">
                            {accountId && accountName && (
                                <Pill
                                    brand={brand}
                                    text={accountName}
                                    popoverOptions={{
                                        id: 'BulkUploadHeaderPillPopover',
                                        content: (
                                            <div className="bulk-upload-header-pill-popover">
                                                <Section level="top">
                                                    <Section.Header>
                                                        <div className="bulk-upload-header-pill-popover-header">
                                                            <div className="bulk-upload-header-pill-popover-title">
                                                                <BrandIcon
                                                                    brand={
                                                                        brand
                                                                    }
                                                                    size={16}
                                                                />
                                                                <Section.Title>
                                                                    {`${accountName} · `}
                                                                    <span className="bulk-upload-header-pill-popover-title-text">
                                                                        {
                                                                            accountId
                                                                        }
                                                                    </span>
                                                                </Section.Title>
                                                            </div>
                                                            {vendorName &&
                                                                vendorId && (
                                                                    <div className="bulk-upload-header-pill-popover-footer">
                                                                        {isSubaccount
                                                                            ? `${$t(
                                                                                  'bulkDigitalAudio.bulkUploadHeader.subaccountText'
                                                                              )}  ${vendorName} · ${vendorId}`
                                                                            : $t(
                                                                                  'bulkDigitalAudio.bulkUploadHeader.accountText'
                                                                              )}
                                                                    </div>
                                                                )}
                                                        </div>
                                                    </Section.Header>
                                                </Section>
                                            </div>
                                        ),
                                    }}
                                />
                            )}
                        </div>
                    ),
                }}
            />
        </div>
    );
};

export default BulkUploadHeader;