import React, { useState } from 'react';

import { bookDisplayMobileElements } from '../constants/book';
import { MAX_RESULTS_PER_PAGE } from '../constants/pagination';
import { Book } from '../scripts/searcher';

import DataFilter from './DataFilter';
import MobileDataListElement from './MobileDataListElement';
import Paginator from './Paginator';

interface IProps {
    books: Book[]
}

const MobileDataList: React.FC<IProps> = (props) => {
    const { books } = props;

    const [sortBy, setSortBy] = useState<string>('title')
    const [direction, setDirection] = useState<string>('asc')

    const [currentIndex, setCurrentIndex] = useState<number>(0)

    const getMaxIndex = (): number => {
        const maxIndex = String(books.length / MAX_RESULTS_PER_PAGE)
        const res = books.length > MAX_RESULTS_PER_PAGE ? parseInt(maxIndex) : 1

        return res
    }

    const setPreviousIndex = () => {
        if (currentIndex > 0) {
            setCurrentIndex(currentIndex - 1)
        }
    }
    const setNextIndex = () => {
        if (currentIndex < getMaxIndex()) {
            setCurrentIndex(currentIndex + 1)
        }
    }

    const getCurrentSliceStart = (): number => {
        return currentIndex == 0 ? 0 : currentIndex * MAX_RESULTS_PER_PAGE
    }

    const getCurrentSliceEnd = (): number => {
        const maxIndex = getMaxIndex()
        return currentIndex == maxIndex ? books.length - 1 : (currentIndex + 1) * MAX_RESULTS_PER_PAGE
    }


    const handleSorting = (sortingElement: string) => {
        if (sortBy == sortingElement) {
            setDirection(direction == 'asc' ? 'desc' : 'asc')
        } else {
            setSortBy(sortingElement)
        }
    }

    const sortBooksFunction = (a: Book, b: Book) => {
        var nameA = a[sortBy == 'title' ? 'title' : 'author'].toUpperCase(); // ignore upper and lowercase
        var nameB = b[sortBy == 'title' ? 'title' : 'author'].toUpperCase(); // ignore upper and lowercase
        if (nameA < nameB) {
            return -1; //nameA comes first
        }
        if (nameA > nameB) {
            return 1; // nameB comes first
        }
        return 0;  // names must be equal
    }

    const getSortedBooks = (): Book[] => {
        return (direction == 'asc') ? books.sort(sortBooksFunction) : books.sort(sortBooksFunction).reverse()
    }

    return (
        <>
            {books.length > 0 &&
                <DataFilter
                    elements={bookDisplayMobileElements}
                    activeFilter={sortBy}
                    currentDirection={direction}
                    setSortingElement={handleSorting} />}

            {getSortedBooks().slice(getCurrentSliceStart(), getCurrentSliceEnd()).map((book, key) => {
                return <MobileDataListElement key={key} book={book} />
            })}

            {books.length > 0 &&
                <Paginator
                    maxIndex={getMaxIndex()}
                    setIndex={setCurrentIndex}
                    setPrevious={setPreviousIndex}
                    setNext={setNextIndex}
                    currentIndex={currentIndex} />}
        </>
    );
};

export default MobileDataList;