import type { FC } from 'react';
import React, { PureComponent } from 'react';
import { HelpTooltip } from '@theorchard/suite-components';
import { get, map } from 'lodash-es';
import { checkIfVariousArtists } from '../../utils/artistsVarious';
import type { ArtistStoreProfile } from '../../types';

const CLASS_NAME = 'ProfilesPopover';

export interface Props {
    id: string;
    title?: string | JSX.Element;
    titleTooltip?: string | JSX.Element;
    profiles: ArtistStoreProfile[];
    isLoading?: boolean;
    loadingProfiles?: number;
    footer?: JSX.Element | null;
    trigger?: 'click' | 'hover';
    rootClose?: boolean;
    componentProps?: object;
    profileEmptyComponent: FC<{ store?: number }>;
    profileLoadingComponent: FC;
    profileComponent: React.ElementType<{
        store?: number;
        profile?: ArtistStoreProfile;
    }>;
    emptyProps?: object;
    onOpen?: () => void;
    onClose?: () => void;
    onEditIncorrectArtist?: () => void;
    children?: React.ReactNode;
}

class ProfilesPopover extends PureComponent<Props> {
    constructor(props: Props) {
        super({
            ...props,
            loadingProfiles: 2,
            trigger: 'hover',
        });
    }

    getComponent = (profile: ArtistStoreProfile) => {
        if (!profile) return null;

        const {
            profileComponent: Component,
            profileEmptyComponent: EmptyComponent,
            componentProps,
            emptyProps,
        } = this.props;

        const { store, url } = profile;

        if (!url) return <EmptyComponent key={profile.id} store={store} {...emptyProps} />;

        return <Component key={profile.id} profile={profile} store={store} {...componentProps} />;
    };

    isVariousOrCorrectionMode = () => {
        const data = get(this.props, 'children.props.data');

        if (!data) return false;

        const { data: profileData } = data;
        const { name, isCorrectionMode } = profileData;
        const { isVarious } = checkIfVariousArtists([name]);

        if (isVarious || isCorrectionMode) return true;

        return false;
    };

    renderContent = () => (
        <div className={CLASS_NAME}>
            <div className={`${CLASS_NAME}-content-container`}>
                {this.renderTitle()}
                {this.renderProfiles()}
            </div>
            {this.renderFooter()}
        </div>
    );

    renderTooltip() {
        const { titleTooltip } = this.props;
        if (!titleTooltip) return null;
        return (
            <div className={`${CLASS_NAME}-header-tooltip`}>
                <HelpTooltip id="profile-title-info" trigger="click" message={titleTooltip} />
            </div>
        );
    }

    renderTitle() {
        const { title } = this.props;
        if (!title) return null;

        return (
            <div className={`${CLASS_NAME}-header`}>
                <div className={`${CLASS_NAME}-header-title`}>{title}</div>
                {this.renderTooltip()}
            </div>
        );
    }

    renderLoader() {
        const { profileLoadingComponent: LoadingComponent, loadingProfiles } = this.props;
        const profilesToLoad = [...Array(loadingProfiles).keys()];
        return (
            <div className={`${CLASS_NAME}-loader-container`}>
                {profilesToLoad.map((key) => (
                    <LoadingComponent key={key} />
                ))}
            </div>
        );
    }

    renderProfiles() {
        const { isLoading, profiles } = this.props;
        if (isLoading) return this.renderLoader();

        return (
            <div className={`${CLASS_NAME}-content`}>
                {map(profiles, (profile) => this.getComponent(profile))}
            </div>
        );
    }

    renderFooter() {
        const { footer } = this.props;
        if (!footer) return null;

        return <div className={`${CLASS_NAME}-footer`}>{footer}</div>;
    }

    render() {
        const { id, children, trigger, onOpen, onClose } = this.props;

        if (this.isVariousOrCorrectionMode())
            return <div className={`${CLASS_NAME}-trigger`}>{children}</div>;

        return (
            <HelpTooltip
                id={id}
                overlayClassName={`${CLASS_NAME}-overlay`}
                tooltipPlacement="bottom"
                trigger={trigger}
                message={this.renderContent()}
                onOpen={onOpen}
                onClose={onClose}
            >
                <div className={`${CLASS_NAME}-trigger`}>{children}</div>
            </HelpTooltip>
        );
    }
}

export default ProfilesPopover;