import React from 'react';
import { HelpTooltip } from '@theorchard/suite-components';
import { GlyphIcon } from '@theorchard/suite-icons';
import type {
    SelectOptionComponent,
    SongWriter,
    SongWriterState,
} from 'src/types';

const CLASSNAME = 'SongWriterOption';

const SongWriterOption = (props: SelectOptionComponent<SongWriter>) => {
    const swData: SongWriterState = props.data as unknown as SongWriterState;
    const { id, legalName, publisherName, controlled } = swData;

    const controlledText = controlled
        ? $t('common.controlled')
        : $t('common.nonControlled');
    const publisherText = publisherName ? ` • ${publisherName}` : '';
    const fullConcatenatedText = `${legalName}${publisherText} • ${controlledText}`;

    const addNewOption = (
        <div className="d-flex flex-column">
            <span className={`${CLASSNAME}-addNewSongwriter`}>
                <GlyphIcon name="plus" size={16} />
                {legalName}
            </span>
        </div>
    );

    const optionWithGreyedControlled = (
        <div className="d-flex flex-column">
            <span>{legalName}</span>
            <span className="text-muted">{`${controlledText}${publisherText}`}</span>
        </div>
    );

    if (props.component === 'menu')
        return (
            <div>
                {id === 'addNewSongwriter'
                    ? addNewOption
                    : optionWithGreyedControlled}
            </div>
        );

    return (
        <div>
            <HelpTooltip
                id={CLASSNAME}
                tooltipPlacement="top"
                message={fullConcatenatedText}
            >
                {id === 'addNewSongwriter' ? (
                    addNewOption
                ) : (
                    <div className="ellipsis">{fullConcatenatedText}</div>
                )}
            </HelpTooltip>
        </div>
    );
};

export default SongWriterOption;