import type { FC } from 'react';
import React from 'react';
import {
    CoverArt,
    Status,
    Tag,
    PageHeader,
} from '@theorchard/suite-components';
import { EMPTY_CHAR, IMAGE_PLACEHOLDER_URL } from 'src/constants';
import type { MergedProduct } from 'src/product/product';
import type { SubmissionType } from 'src/types';

export const CLASS_NAME = 'ProductHeader';
const INTL_PREFIX = 'contentReview.productModalHeaderV2';

export interface Props {
    mergedProduct: MergedProduct;
    submissionType: SubmissionType | undefined;
}

const ProductHeader: FC<Props> = ({ mergedProduct, submissionType }) => {
    return (
        <div className={CLASS_NAME} data-testid={CLASS_NAME}>
            <PageHeader.Row>
                <PageHeader.Primary>
                    <CoverArt
                        url={
                            mergedProduct.basics.imageLocation
                                .get()
                                ?.toString() || IMAGE_PLACEHOLDER_URL
                        }
                    />
                    <div className={`${CLASS_NAME}-body-titles`}>
                        <Tag
                            text={$t('common.productTypes.digitalAudio')}
                            variant="category"
                        />
                        <PageHeader.PrimaryTitle>
                            <h4
                                className={`${CLASS_NAME}-productName`}
                                id={`${CLASS_NAME}-productName`}
                            >
                                {mergedProduct.basics.productName
                                    .currentValue || EMPTY_CHAR}
                            </h4>
                            <Status
                                testId={`${CLASS_NAME}-submissionType`}
                                variant="success"
                                text={
                                    submissionType
                                        ? $t(
                                              `${INTL_PREFIX}.status.${submissionType}`
                                          )
                                        : EMPTY_CHAR
                                }
                                filled
                            />
                        </PageHeader.PrimaryTitle>
                        <PageHeader.PrimarySubtitle
                            testId={`${CLASS_NAME}-productPrimaryArtists`}
                        >
                            Primary Artist:{' '}
                            {mergedProduct.basics.contributors.primaryArtists
                                .get()
                                .join(', ') || EMPTY_CHAR}
                        </PageHeader.PrimarySubtitle>
                    </div>
                </PageHeader.Primary>
            </PageHeader.Row>
        </div>
    );
};

export default ProductHeader;