import React, { Component } from 'react';
import { StoreIcon } from '@theorchard/suite-icons';
import cx from 'classnames';
import { STORE } from '../../constants';
import { formatMessage } from '../../locale';
import { trackSegmentEvent } from '../../utils/analytics';
import type { ArtistStoreProfile } from '../../types';

const CLASS_NAME = 'ArtistProfile';

export interface Props {
    profile?: ArtistStoreProfile;
    store?: number;
    isAnalyticsMode?: boolean;
}

export default class ArtistProfile extends Component<Props> {
    hasGenres = () => {
        const { profile } = this.props;
        if (!profile) return false;
        return Array.isArray(profile.genres) && profile.genres.length > 0;
    };

    handleLinkClick = () => {
        const { store, isAnalyticsMode } = this.props;
        switch (store) {
            case STORE.SPOTIFY:
                if (isAnalyticsMode)
                    trackSegmentEvent({
                        name: 'view participant',
                        properties: {
                            category: 'DPB Basics Page',
                            label: `view on - Spotify (${store})`,
                            value: 1,
                        },
                    });
                break;
            case STORE.APPLE_MUSIC:
                if (isAnalyticsMode)
                    trackSegmentEvent({
                        name: 'view participant',
                        properties: {
                            category: 'DPB Basics Page',
                            label: `view on - Apple (${store})`,
                            value: 1,
                        },
                    });
                break;
            default:
                break;
        }
    };

    renderFollowers() {
        const { profile } = this.props;
        if (!profile) return null;

        const { followers } = profile;
        if (!followers || !Number.isInteger(followers)) return null;

        const followersClass = cx(`${CLASS_NAME}-followers`, {
            [`${CLASS_NAME}-followers-divider`]: this.hasGenres(),
        });
        return (
            <div className={followersClass}>
                {formatMessage('artistProfile.followers', { count: followers })}
            </div>
        );
    }

    renderGenres() {
        const { profile } = this.props;
        if (!profile) return null;

        if (!this.hasGenres()) return null;

        const { genres } = profile;
        const genresString = genres?.join(', ') ?? '-';
        return (
            <div className={`${CLASS_NAME}-genre`} title={genresString}>
                {genresString}
            </div>
        );
    }

    renderStoreIcon() {
        const { store } = this.props;
        switch (store) {
            case STORE.SPOTIFY:
                return <StoreIcon name="spotify" />;
            case STORE.APPLE_MUSIC:
                return <StoreIcon name="appleMusic" />;
            default:
                return null;
        }
    }

    renderThumbnail() {
        const { store, profile } = this.props;
        if (!profile) return null;

        if (!profile.image) {
            if (!store) return null;
            return (
                <div className={`${CLASS_NAME}-icon-placeholder`}>
                    <div className={`${CLASS_NAME}-empty-store-icon`}>{this.renderStoreIcon()}</div>
                </div>
            );
        }

        return (
            <div className={`${CLASS_NAME}-icon-placeholder`}>
                <img className={`${CLASS_NAME}-icon`} src={profile.image} alt="" />
                <div className={`${CLASS_NAME}-store-icon`}>{this.renderStoreIcon()}</div>
            </div>
        );
    }

    renderLink() {
        const { profile, store } = this.props;
        if (!profile) return null;
        if (!profile.url) return null;

        let linkText;
        switch (store) {
            case STORE.SPOTIFY:
                linkText = formatMessage('artistProfile.linkSpotify');
                break;
            case STORE.APPLE_MUSIC:
                linkText = formatMessage('artistProfile.linkAppleMusic');
                break;
            default:
                linkText = profile.url;
                break;
        }
        return (
            <div className={`${CLASS_NAME}-link`}>
                <a
                    href={profile.url}
                    onClick={() => this.handleLinkClick()}
                    target="_blank"
                    rel="noopener noreferrer"
                >
                    {linkText}
                </a>
            </div>
        );
    }

    render() {
        const { profile } = this.props;
        if (!profile) return null;

        return (
            <div className={CLASS_NAME}>
                <div className={`${CLASS_NAME}-left`}>{this.renderThumbnail()}</div>
                <div className={`${CLASS_NAME}-right`}>
                    <div className={`${CLASS_NAME}-name`} title={profile.name}>
                        {profile.name}
                    </div>
                    <div className={`${CLASS_NAME}-additional-info`}>
                        {this.renderFollowers()}
                        {this.renderGenres()}
                    </div>
                    {this.renderLink()}
                </div>
            </div>
        );
    }
}