import type { FC } from 'react';
import React from 'react';
import { BsPopover } from '@theorchard/suite-components';
import OverlayTriggerPopover from 'src/components/overlayTriggerPopover';
import ArtistField from 'src/pages/productModal/components/contributors/components/productContributors/artistField';
import { isClassicalGenre, isGenreWithComposer } from 'src/utils/product';
import type { MergedProduct } from 'src/product/product';

export const CLASS_NAME = 'ProductArtworkInfoPopover';

export interface Props {
    product: MergedProduct;
}

const ProductArtworkInfoPopover: FC<Props> = ({ product }) => {
    const renderPopoverContent = () => (
        <BsPopover.Content
            data-testid={`${CLASS_NAME}-Content`}
            className={`${CLASS_NAME}-Content`}
        >
            <div className="card-title">
                {$t(`contentReview.contributors.productContributors`)}
            </div>
            <div
                className="ArtistsTypesContainer"
                data-testid="artistTypesContainer"
            >
                <ArtistField
                    artistType="primary_artist"
                    field={product.basics.contributors.primaryArtists}
                />
                {isClassicalGenre(product) ? (
                    <>
                        <ArtistField
                            artistType="remixer"
                            field={product.basics.contributors.remixers}
                        />
                        <ArtistField
                            artistType="composer"
                            field={product.basics.contributors.composers}
                        />
                        <ArtistField
                            artistType="orchestra"
                            field={product.basics.contributors.orchestras}
                        />
                        <ArtistField
                            artistType="ensemble"
                            field={product.basics.contributors.ensembles}
                        />
                        <ArtistField
                            artistType="conductor"
                            field={product.basics.contributors.conductors}
                        />
                    </>
                ) : (
                    <>
                        <ArtistField
                            artistType="featuring"
                            field={product.basics.contributors.featuringArtists}
                        />
                        <ArtistField
                            artistType="feature_to_primary"
                            field={
                                product.basics.contributors.featuredToPrimary
                            }
                        />
                        {isGenreWithComposer(product) && (
                            <ArtistField
                                artistType="composer"
                                field={product.basics.contributors.composers}
                            />
                        )}
                    </>
                )}
            </div>
        </BsPopover.Content>
    );

    return (
        <OverlayTriggerPopover
            id={`${CLASS_NAME}-Trigger`}
            className={`${CLASS_NAME}-Trigger`}
            PopoverContent={() => renderPopoverContent()}
        >
            <span className={`${CLASS_NAME}-text`}>
                {$t('common.fieldNames.more_info')}
            </span>
        </OverlayTriggerPopover>
    );
};

export default ProductArtworkInfoPopover;