import type { FC } from 'react';
import React, { useState, useEffect } from 'react';
import cx from 'classnames';
import { map } from 'lodash-es';
import { COMPOUND_TYPE } from '../../../constants';
import { formatMessage } from '../../../locale';
import ArtistProfileCheckable from '../../addNewArtist/artistProfileCheckable/artistProfileCheckable';

const CLASS_NAME = 'ArtistCompoundPage';

export interface Props {
    name: string;
    artist: string;
    separateArtists: string[];
    isVisible: boolean;
    onValidate: (name?: string) => void;
}

const ArtistCompoundPage: FC<Props> = ({
    name,
    artist,
    separateArtists,
    isVisible,
    onValidate,
}) => {
    const [selectedItem, selectItem] = useState<string>();
    useEffect(() => {
        if (onValidate) onValidate(selectedItem);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [selectedItem]);

    const getCheckableProps = (type: string) => ({
        id: `${name}_${type}`,
        name,
        onChange: () => selectItem(type),
        checked: selectedItem === type,
    });

    const formattedMessage = (message: string) => {
        const splitter = /\[b\]([^\]]*)\[\/b\]/;
        const [first, second] = formatMessage(message).split(splitter);

        return [
            first,
            <span key="bold" className={`${CLASS_NAME}-bold`}>
                {second}
            </span>,
        ];
    };

    return (
        <div className={cx(CLASS_NAME, { [`${CLASS_NAME}-hidden`]: !isVisible })}>
            <ArtistProfileCheckable {...getCheckableProps(COMPOUND_TYPE.GROUP)}>
                <>
                    <div className={`${CLASS_NAME}-headline`}>
                        {formattedMessage('artistCompound.groupMessage')}
                    </div>
                    <div className={`${CLASS_NAME}-example`}>
                        <div className={`${CLASS_NAME}-example-line`}>
                            {formatMessage('artistCompound.ieMessage')}
                        </div>
                        <div className={`${CLASS_NAME}-tag`}>{artist}</div>
                    </div>
                </>
            </ArtistProfileCheckable>
            <ArtistProfileCheckable {...getCheckableProps(COMPOUND_TYPE.SEPARATE)}>
                <>
                    <div className={`${CLASS_NAME}-headline`}>
                        {formattedMessage('artistCompound.separateMessage')}
                    </div>
                    <div className={`${CLASS_NAME}-example`}>
                        <div className={`${CLASS_NAME}-example-line`}>
                            {formatMessage('artistCompound.ieMessage')}
                        </div>
                        {map(separateArtists, (separateArtist, key) => {
                            const compositeKey = `${separateArtist}_${key}`;
                            return (
                                <div key={compositeKey} className={`${CLASS_NAME}-tag`}>
                                    {separateArtist}
                                </div>
                            );
                        })}
                    </div>
                </>
            </ArtistProfileCheckable>
        </div>
    );
};

export default ArtistCompoundPage;