import React, { Component } from 'react';
import { Button } from '@theorchard/suite-components';
import { formatMessage } from '../../locale';
import ArtistPopover from './artistPopover';
import type { ArtistStoreProfile } from '../../types';

const CLASS_NAME = 'ArtistPopoverDigital';

export interface Props {
    id: string;
    profiles: ArtistStoreProfile[];
    isLoading?: boolean;
    onOpen?: () => void;
    onEditIncorrectArtist?: () => void;
    children?: React.ReactNode;
}

export default class ArtistPopoverDigital extends Component<Props> {
    renderFooter() {
        const { onEditIncorrectArtist } = this.props;
        if (!onEditIncorrectArtist) return null;

        return (
            <div className={`${CLASS_NAME}-footer`}>
                <Button
                    className={`${CLASS_NAME}-report-button`}
                    onClick={onEditIncorrectArtist}
                    variant="link"
                >
                    {formatMessage('artistPopover.reportMissingProfiles')}
                </Button>
            </div>
        );
    }

    render() {
        const { id, children, profiles, isLoading, onOpen } = this.props;

        return (
            <ArtistPopover
                id={id}
                profiles={profiles}
                isLoading={isLoading}
                loadingProfilesCount={2}
                footer={this.renderFooter()}
                onOpen={onOpen}
            >
                {children}
            </ArtistPopover>
        );
    }
}