import type { FC } from 'react';
import React from 'react';
import cx from 'classnames';
import { get } from 'lodash-es';
import { COMPOUND_TYPE } from '../../constants';
import { formatMessage } from '../../locale';
import ArtistProfilesPagination from '../addNewArtist/artistProfilesPagination';
import ArtistCompoundPage from './artistCompoundPage';

const CLASS_NAME = 'ArtistDropdownCompoundMessage';

export interface Props {
    artist: string;
    separateArtists: string[];
    disabled: boolean;
    onCancel: () => void;
    onConfirm: () => void;
}

const ArtistDropdownCompoundMessage: FC<Props> = ({
    artist,
    separateArtists,
    disabled,
    onCancel,
    onConfirm,
}) => {
    const compoundPagesContext = [{ artist, separateArtists, name: `compound_${artist}` }];

    return (
        <div className={cx(CLASS_NAME, { [`${CLASS_NAME}-disabled`]: disabled })}>
            <div className={`${CLASS_NAME}-header`}>{formatMessage('artistCompound.header')}</div>
            <div className={`${CLASS_NAME}-content`}>
                <ArtistProfilesPagination
                    pagesContext={compoundPagesContext}
                    onDone={(result) => {
                        const value = get(result, 'value');
                        if (value === COMPOUND_TYPE.GROUP) onConfirm();
                        else onCancel();
                    }}
                    onValidate={(item) => [Boolean(get(item, 'value')), item]}
                    doneText={formatMessage('artistCompound.buttonDone')}
                >
                    {(context, state) => (
                        <ArtistCompoundPage
                            key={context.name}
                            name={context.name}
                            artist={context.artist}
                            separateArtists={context.separateArtists}
                            isVisible={state.isVisible}
                            onValidate={(value) => state.onValidate({ value })}
                        />
                    )}
                </ArtistProfilesPagination>
            </div>
        </div>
    );
};

export default ArtistDropdownCompoundMessage;