import React from 'react';
import { Pagination } from '@theorchard/suite-components';
import { formatMessage } from '@theorchard/suite-frontend';
import { GlyphIcon } from '@theorchard/suite-icons';
import cx from 'classnames';
import {
    OrderDir,
    PublishingSongWriterOrderByField,
} from 'src/data/schemaTypes';
import SongWriterRow from 'src/pages/songWriterListPage/songWriterRow';
import { CLASSNAME } from 'src/pages/songWriterListPage/songWriters';
import type { SongWriterListSort } from 'src/data/queries';
import type { SongWriter } from 'src/types';

interface SortableHeaderProps {
    field: PublishingSongWriterOrderByField;
    label: string;
    sort: SongWriterListSort;
    onSortChange: (field: PublishingSongWriterOrderByField) => void;
}

const SortableHeader: React.FC<SortableHeaderProps> = ({
    field,
    label,
    sort,
    onSortChange,
}) => {
    const isSorted = sort.orderBy === field;
    const isDescending = isSorted && sort.orderDir === OrderDir.DESC;

    return (
        <th
            aria-sort={
                isSorted ? (isDescending ? 'descending' : 'ascending') : 'none'
            }
        >
            <button
                type="button"
                className={`${CLASSNAME}-sort-header`}
                onClick={() => onSortChange(field)}
            >
                {label}
                <GlyphIcon
                    name={isDescending ? 'arrowDown' : 'arrowUp'}
                    size={12}
                    className={cx(`${CLASSNAME}-sort-indicator`, {
                        [`${CLASSNAME}-sort-indicator-inactive`]: !isSorted,
                    })}
                />
            </button>
        </th>
    );
};

interface Props {
    songWriters: SongWriter[];
    page: number;
    totalPages: number;
    totalCount: number;
    pageSize: number;
    /**
     * Sorting the songwriter list is behind the
     * `publishing_admin_ux_improvements` flag. When the flag is off the page
     * passes neither of these and the Songwriter column renders as the plain,
     * non-interactive header it was before the feature.
     */
    sort?: SongWriterListSort;
    onSortChange?: (field: PublishingSongWriterOrderByField) => void;
    onPaginationChange: (page: number) => void;
    onSongWriterDelete: (songWriter: SongWriter) => void;
    onSetPageSize: (pageSize: number) => void;
}

const SongWriterTable: React.FC<Props> = ({
    songWriters,
    page,
    totalPages,
    totalCount,
    pageSize,
    sort,
    onSortChange,
    onPaginationChange,
    onSongWriterDelete,
    onSetPageSize,
}) => {
    return (
        <>
            <table className="table">
                <thead>
                    <tr>
                        {sort && onSortChange ? (
                            <SortableHeader
                                field={
                                    PublishingSongWriterOrderByField.LEGAL_NAME
                                }
                                label={formatMessage('generic.songWriter')}
                                sort={sort}
                                onSortChange={onSortChange}
                            />
                        ) : (
                            <th>{formatMessage('generic.songWriter')}</th>
                        )}
                        <th>{formatMessage('generic.pro')}</th>
                        <th>{formatMessage('generic.ipi')}</th>
                        <th>
                            {formatMessage(
                                'songWriters.associatedCompositions'
                            )}
                        </th>
                        <th>{formatMessage('generic.actions')}</th>
                    </tr>
                </thead>

                <tbody>
                    {songWriters.map(songWriter => (
                        <SongWriterRow
                            key={songWriter.id}
                            songWriter={songWriter}
                            onSongWriterDelete={onSongWriterDelete}
                            fromPage={page + 1} // SongWriterTable page param is page-1
                        />
                    ))}
                </tbody>
            </table>

            {totalPages > 1 && (
                <div>
                    <Pagination
                        onChange={onPaginationChange}
                        currentPage={page}
                        totalCount={totalCount}
                        pageSize={pageSize}
                        onSetPageSize={onSetPageSize}
                    />
                </div>
            )}
        </>
    );
};

export default SongWriterTable;