import React, { useState } from 'react';
import cx from 'classnames';
import { uniqBy } from 'lodash';
import { Pagination, Help } from '@orchard/frontend-react-components';
import { formatMessage } from '@orchard/frontend-localization';
import { Track } from 'src/queries/product';
import TableCellLoader from 'src/components/loaders/table-cell-loader';
import { formatTrackName } from 'src/utils/formatters';
import messages from './i18n';

const CLASS_NAME = 'TracksList';

const TRACKS_PER_PAGE = 20;

type Props = {
    loading: boolean;
    onSelectTrack(tuid: string): void;
    tracks?: Track[];
    selectedTrack?: Track;
};

const TracksList: React.FC<Props> = ({ loading, tracks, selectedTrack, onSelectTrack }) => {
    const [selectedPage, setSelectedPage] = useState<number>();
    if (loading)
        return (
            <div className={ CLASS_NAME }>
                <div className={ `${CLASS_NAME}-heading` }>
                    { formatMessage(messages.tracks) }
                </div>
                <div className={ `${CLASS_NAME}-table` }>
                    <div className={ `${CLASS_NAME}-row ${CLASS_NAME}-header` }>
                        <div className={ `${CLASS_NAME}-column` }>{ formatMessage(messages.hash) }</div>
                        <div className={ `${CLASS_NAME}-column` }>{ formatMessage(messages.trackName) }</div>
                        <div className={ `${CLASS_NAME}-column` }>{ formatMessage(messages.isrc) }</div>
                        <div className={ `${CLASS_NAME}-column` }>{ formatMessage(messages.noOfSplits) }</div>
                    </div>
                    <div className={ `${CLASS_NAME}-body` } role="listbox" tabIndex={ 0 }>
                        { new Array(10).fill(null).map((_, index) => (
                        // eslint-disable-next-line react/no-array-index-key
                            <div key={ index } className={ `${CLASS_NAME}-row` }>
                                <div className={ `${CLASS_NAME}-column` }><TableCellLoader /></div>
                                <div className={ `${CLASS_NAME}-column` }><TableCellLoader /></div>
                                <div className={ `${CLASS_NAME}-column` }><TableCellLoader /></div>
                                <div className={ `${CLASS_NAME}-column` }><TableCellLoader /></div>
                            </div>
                        )) }
                    </div>
                </div>
            </div>
        );


    if (!tracks)
        return null;

    const productContainsMultipleDiscs = (uniqBy(tracks, (t) => t.volumeNumber).length > 1);
    const totalPages = Math.ceil(tracks.length / TRACKS_PER_PAGE);

    const selectedTrackPage = selectedTrack
        && Math.ceil(tracks.findIndex(track => track.tuid === selectedTrack.tuid) / TRACKS_PER_PAGE);

    const currentPage = selectedPage || selectedTrackPage || 1;

    const pageTracks = tracks.slice(
        (currentPage - 1) * TRACKS_PER_PAGE,
        currentPage * TRACKS_PER_PAGE
    );

    return (
        <div className={ CLASS_NAME }>
            <div className={ `${CLASS_NAME}-heading` }>
                { formatMessage(messages.tracks) }
                <Help
                    id="track-level-tooltip"
                    message={ formatMessage(messages.trackLevelTooltip) }
                />
            </div>
            <div className={ `${CLASS_NAME}-table` }>
                <div className={ `${CLASS_NAME}-row ${CLASS_NAME}-header` }>
                    <div className={ cx(
                        `${CLASS_NAME}-column`,
                        { [`${CLASS_NAME}-column--hidden`]: !productContainsMultipleDiscs }
                    ) }
                    >{ formatMessage(messages.disc) }
                    </div>
                    <div className={ `${CLASS_NAME}-column` }>{ formatMessage(messages.hash) }</div>
                    <div className={ `${CLASS_NAME}-column` }>{ formatMessage(messages.trackName) }</div>
                    <div className={ `${CLASS_NAME}-column` }>{ formatMessage(messages.isrc) }</div>
                    <div className={ `${CLASS_NAME}-column` }>{ formatMessage(messages.noOfSplits) }</div>
                </div>
                <div className={ `${CLASS_NAME}-body` } role="listbox" tabIndex={ 0 }>
                    { pageTracks.map((track) => {
                        const selected = selectedTrack?.tuid === track.tuid;

                        return (
                            <div
                                className={ cx(
                                    `${CLASS_NAME}-row`,
                                    { [`${CLASS_NAME}-row--selected`]: selected }
                                ) }
                                key={ track.tuid }
                                onClick={ () => onSelectTrack(track.tuid) }
                                role="option"
                                aria-selected={ selected }
                                tabIndex={ 0 }
                            >
                                <div className={ cx(
                                    `${CLASS_NAME}-column`,
                                    { [`${CLASS_NAME}-column--hidden`]: !productContainsMultipleDiscs }
                                ) }
                                >{ track.volumeNumber || '' }
                                </div>
                                <div className={ `${CLASS_NAME}-column` }>
                                    { track.number }
                                </div>
                                <div className={ `${CLASS_NAME}-column` }>
                                    { formatTrackName(track.name!, track.version) }
                                </div>
                                <div className={ `${CLASS_NAME}-column` }>
                                    { track.isrc }
                                </div>
                                <div className={ `${CLASS_NAME}-column` }>
                                    { track.splits.length }
                                </div>
                            </div>
                        );
                    }) }
                </div>
            </div>
            <div className={ `${CLASS_NAME}-pagination` }>
                <Pagination
                    currentPage={ currentPage }
                    totalPages={ totalPages }
                    onChange={ setSelectedPage }
                />
            </div>
        </div>
    );
};

export default TracksList;