import React from 'react';
import { Card, Pagination } from '@theorchard/suite-components';
import { formatMessage, useIdentity } from '@theorchard/suite-frontend';
import EmptyState from 'src/components/emptyState';
import { FEATURE_FLAGS } from 'src/constants';
import SongRow from 'src/pages/songListPage/songRow';
import type { Compositions } from 'src/types';

interface Props {
    isDraft: boolean;
    isLoading: boolean;
    songsData: {
        compositions: Compositions | undefined;
        totalCount: number | undefined;
    };
    page: number;
    pageSize: number;
    showPubSongId: boolean;
    onClickSong: () => void;
    onEditSong: (id: string) => void;
    onDeleteSong: (id: string) => void;
    onToggleSongRowDropDown: (isOpen: boolean) => void;
    onPaginationChange: (page: number) => void;
    onSetPageSize: (pageSize: number) => void;
}

const SongTable: React.FC<Props> = ({
    isDraft,
    isLoading,
    songsData,
    page,
    pageSize,
    showPubSongId,
    onClickSong,
    onEditSong,
    onDeleteSong,
    onToggleSongRowDropDown,
    onPaginationChange,
    onSetPageSize,
}) => {
    const identity = useIdentity();
    const adminUxImprovementsEnabled =
        !!identity.features[FEATURE_FLAGS.ADMIN_UX_IMPROVEMENTS];

    const { compositions, totalCount } = songsData;
    const totalPages = Math.ceil((totalCount || 0) / pageSize);

    return (
        <Card suite className="p-2">
            {!compositions?.length ? (
                <EmptyState isLoading={isLoading} page="songs" />
            ) : (
                <table className="table">
                    <thead>
                        <tr>
                            <th>{formatMessage('generic.songTitle')}</th>
                            {showPubSongId && (
                                <th>{formatMessage('generic.songId')}</th>
                            )}
                            <th>{formatMessage('generic.songWriters')}</th>
                            <th>
                                {formatMessage('songs.associatedRecordings')}
                            </th>
                            <th>{formatMessage('generic.ownership')}</th>
                            {adminUxImprovementsEnabled ? (
                                <>
                                    <th>
                                        {formatMessage('generic.createdDate')}
                                    </th>
                                    <th>
                                        {formatMessage('generic.submittedDate')}
                                    </th>
                                    <th>
                                        {formatMessage('generic.modifiedDate')}
                                    </th>
                                    <th>
                                        {formatMessage('generic.delivered')}
                                    </th>
                                </>
                            ) : (
                                <th>
                                    {isDraft
                                        ? formatMessage('generic.modifiedDate')
                                        : formatMessage(
                                              'generic.submittedDate'
                                          )}
                                </th>
                            )}
                            <th />
                        </tr>
                    </thead>

                    <tbody>
                        {compositions?.map(composition => (
                            <SongRow
                                key={composition.id}
                                song={composition}
                                isDraft={isDraft}
                                showPubSongId={showPubSongId}
                                onClickSong={onClickSong}
                                onEdit={onEditSong}
                                onDelete={onDeleteSong}
                                onToggleDropdown={onToggleSongRowDropDown}
                            />
                        ))}
                    </tbody>
                </table>
            )}

            {!isLoading && totalPages > 1 && (
                <div className="pagination-container">
                    <Pagination
                        onChange={onPaginationChange}
                        currentPage={page}
                        totalCount={totalCount || 0}
                        pageSize={pageSize}
                        onSetPageSize={onSetPageSize}
                    />
                </div>
            )}
        </Card>
    );
};

export default SongTable;