import React, { useState } from 'react';
import { Button, Modal, Select } from '@theorchard/suite-components';
import { formatMessage, useIdentity } from '@theorchard/suite-frontend';
import { GlyphIcon } from '@theorchard/suite-icons';
import { Decimal } from 'decimal.js';
import { Link } from 'react-router-dom';
import { FEATURE_FLAGS } from 'src/constants';
import { CLASSNAME } from 'src/pages/songListPage/songListPage';
import SongWritersList from 'src/pages/songListPage/songWritersList';
import { utcToDateString } from 'src/utils/date';
import { getSum } from 'src/utils/helpers';
import { songUrl } from 'src/utils/urls';
import type { CompositionExtended } from 'src/types';

const enum ActionsOptions {
    EDIT = 'edit',
    DELETE = 'delete',
}

interface Props {
    song: CompositionExtended;
    isDraft: boolean;
    showPubSongId: boolean;
    onClickSong: () => void;
    onEdit: (id: string) => void;
    onDelete: (id: string) => void;
    onToggleDropdown: (isOpen: boolean) => void;
}

// Workaround for React 18 + react-router-dom v5 type incompatibility
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const LinkAny = Link as any;

const renderOwnership = (ownerships: string[]) => {
    const ownership = getSum(
        ownerships.map(o => new Decimal(o || 0))
    ).toString();
    if (ownership === '0')
        return (
            <div className={`${CLASSNAME}-none`}>
                {formatMessage('songs.noOwnership')}
            </div>
        );
    return (
        <div
            className={`${CLASSNAME}-ownership`}
        >{`${ownership}% ${formatMessage('generic.ownership')}`}</div>
    );
};

const SongRow: React.FC<Props> = ({
    song,
    isDraft,
    showPubSongId,
    onClickSong,
    onEdit,
    onDelete,
    onToggleDropdown,
}) => {
    const identity = useIdentity();
    const isSongDeletionAllowed =
        identity.features[FEATURE_FLAGS.ALLOW_DELETE_SONG];
    const adminUxImprovementsEnabled =
        !!identity.features[FEATURE_FLAGS.ADMIN_UX_IMPROVEMENTS];
    const [deleteModalOpen, setDeleteModalOpen] = useState(false);

    const options = [
        {
            label: formatMessage('generic.edit'),
            value: ActionsOptions.EDIT,
        },
    ];
    if (isSongDeletionAllowed)
        options.push({
            label: formatMessage('generic.delete'),
            value: ActionsOptions.DELETE,
        });

    const onAction = (option?: { value: string }) => {
        switch (option?.value) {
            case ActionsOptions.EDIT:
                onEdit(song.id);
                break;
            case ActionsOptions.DELETE:
                setDeleteModalOpen(true);
                break;
            default:
                break;
        }
    };
    return (
        <tr key={song.id}>
            <td>
                <LinkAny to={songUrl(song.id)} onClick={onClickSong}>
                    {song.title}
                </LinkAny>
            </td>
            {showPubSongId && <td>{song.pubSongId}</td>}
            <td>
                <SongWritersList agreements={song.agreements} />
            </td>
            <td>
                {song.associatedGlobalSoundRecordings.length +
                    song.associatedLabelSoundRecordings.length ===
                0 ? (
                    <div className={`${CLASSNAME}-none`}>
                        {formatMessage('generic.none')}
                    </div>
                ) : (
                    song.associatedGlobalSoundRecordings.length +
                    song.associatedLabelSoundRecordings.length
                )}
            </td>
            <td>
                {renderOwnership(
                    song.agreements.map(agreement => agreement.split)
                )}
            </td>
            {adminUxImprovementsEnabled ? (
                <>
                    <td>
                        {song.createdAt ? utcToDateString(song.createdAt) : ''}
                    </td>
                    <td>
                        {song.submittedAt
                            ? utcToDateString(song.submittedAt)
                            : ''}
                    </td>
                    <td>
                        {song.modifiedAt
                            ? utcToDateString(song.modifiedAt)
                            : ''}
                    </td>
                    <td>
                        {song.delivered
                            ? formatMessage('generic.yes')
                            : formatMessage('generic.no')}
                    </td>
                </>
            ) : (
                <td>
                    {utcToDateString(
                        isDraft
                            ? song.modifiedAt || song.createdAt
                            : song.submittedAt ?? ''
                    )}
                </td>
            )}
            <td>
                <Select
                    className="DropdownIconButton actions"
                    placeholder=""
                    compact
                    hideClearButton
                    hideFilter
                    defaultValue=""
                    selectedValue=""
                    options={options}
                    onSelect={onAction}
                    onOpen={() => onToggleDropdown(true)}
                    menuWidth={150}
                    menuMinWidth={150}
                    components={{
                        SelectInput: () => (
                            <Button size="sm" variant="link">
                                <GlyphIcon name="optionsHorizontal" size={16} />
                            </Button>
                        ),
                    }}
                />

                {isSongDeletionAllowed && (
                    <Modal
                        isOpen={deleteModalOpen}
                        onRequestClose={() => setDeleteModalOpen(false)}
                        header={formatMessage('songs.deleteModalHeader')}
                        cancelTitle={formatMessage('songs.deleteCancellation')}
                        confirmTitle={formatMessage('songs.deleteConfirmation')}
                        onConfirm={() => {
                            onDelete(song.id);
                            setDeleteModalOpen(false);
                        }}
                    >
                        {formatMessage('songs.deleteWarning')}
                    </Modal>
                )}
            </td>
        </tr>
    );
};

export default SongRow;