import React, { useState } from 'react';
import { Card, GridTable, Pagination } from '@theorchard/suite-components';
import EmptyState from 'src/components/emptyState';
import { Pages } from 'src/components/emptyState/emptyState';
import DeleteSongModal from 'src/pages/songListPage/components/deleteSongModal';
import { useDeleteSongFF } from 'src/utils/features';
import {
    AssociatedSoundRecordingCell,
    DateCell,
    OwnershipCell,
    SongWritersCall,
    TitleCell,
} from './songCells';
import type { Composition } from 'src/data/queries/compositions/types';

const SONGS_PER_PAGE = 25;
const CLASSNAME = 'SongTable';
const INTL_CLASSNAME = 'publishing.songTable';

interface Props {
    isDraft: boolean;
    isLoading: boolean;
    songsData: {
        compositions: Composition[] | undefined;
        totalCount: number | undefined;
    };
    page: number;
    onEditSong: (id: string) => void;
    onDeleteSong: (id: string) => void;
    onPaginationChange: (page: number) => void;
}

const SongTable: React.FC<Props> = ({
    isDraft,
    isLoading,
    songsData,
    page,
    onEditSong,
    onDeleteSong,
    onPaginationChange,
}) => {
    const isSongDeletionAllowed = useDeleteSongFF();
    const [compositionIdForDelete, setCompositionIdForDelete] = useState<
        string | null
    >(null);
    const [pageSize, setPageSize] = useState<number>(SONGS_PER_PAGE);

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

    const rowActions = {
        edit: (row: Composition) => {
            onEditSong(row.id);
        },
        ...(isSongDeletionAllowed
            ? {
                  delete: (row: Composition) => {
                      setCompositionIdForDelete(row.id);
                  },
              }
            : {}),
    };

    return (
        <Card className={`${CLASSNAME} p-2`}>
            {!compositions?.length ? (
                <EmptyState isLoading={isLoading} page={Pages.SONGS} />
            ) : (
                <GridTable
                    data={compositions}
                    loading={isLoading}
                    rowActions={rowActions}
                    footer={
                        <>
                            {totalPages > 1 && (
                                <Pagination
                                    onChange={onPaginationChange}
                                    totalCount={totalCount ?? 0}
                                    pageSize={pageSize}
                                    currentPage={page}
                                    onSetPageSize={(pageNumber: number) =>
                                        setPageSize(pageNumber)
                                    }
                                />
                            )}
                        </>
                    }
                >
                    <GridTable.Column
                        name="title"
                        title={$t(`${INTL_CLASSNAME}.songTitle`)}
                        Cell={TitleCell}
                    />
                    <GridTable.Column
                        name="songWriters"
                        title={$t(`${INTL_CLASSNAME}.songWriters`)}
                        Cell={SongWritersCall}
                    />
                    <GridTable.Column
                        name="associatedSoundRecordings"
                        title={$t(`${INTL_CLASSNAME}.associatedRecordings`)}
                        Cell={AssociatedSoundRecordingCell}
                    />
                    <GridTable.Column
                        name="ownership"
                        title={$t(`${INTL_CLASSNAME}.ownership`)}
                        Cell={OwnershipCell}
                    />
                    <GridTable.Column
                        name="date"
                        title={
                            isDraft
                                ? $t(`${INTL_CLASSNAME}.modifiedDate`)
                                : $t(`${INTL_CLASSNAME}.submittedDate`)
                        }
                        Cell={DateCell}
                    />
                </GridTable>
            )}

            {isSongDeletionAllowed && (
                <DeleteSongModal
                    isOpen={!!compositionIdForDelete}
                    onClose={() => setCompositionIdForDelete(null)}
                    onConfirm={() => {
                        onDeleteSong(compositionIdForDelete as string);
                        setCompositionIdForDelete(null);
                    }}
                />
            )}
        </Card>
    );
};

export default SongTable;