import { h, withVar, mount, Html } from 'lib/rx'
import * as Search from 'lib/search'
import * as Functions from 'lib/functions'
import * as I18n from 'lib/i18n'
import * as Filters from 'view/filters'
import * as Books from 'view/books'
import * as Book from 'book'

// @ts-ignore
const sortedBookLibrary: Array<Book> = (bookLibrary as Array<Book.Book>).sort((a, b) =>
  a.authorsSort == b.authorsSort
    ? a.date > b.date
    : a.authorsSort > b.authorsSort)

mount(withVar<Filters.Model>({}, (filters, updateFilters) =>
  withVar('', (search, updateSearch) => {
    const filteredBooks = filters.flatMap(f => search.map(s =>
      sortedBookLibrary.filter(book =>
        (f.read === undefined || book.read === f.read)
        && (s === '' || matchSearch(book, s))
      )
    ))

    return [
      h('aside', Filters.view({ filteredBooks, filters, updateFilters })),
      h('main',
        h('header',
          h('input',
            { className: 'g-Search',
              oninput: Functions.debounce(
                (event: Event) => updateSearch(_ => (event.target as HTMLInputElement).value),
                500
              )
            }
          ),
          filteredBooks.map(fb => I18n.unit(fb.length, 'livre', 'livres'))
        ),
        Books.view(filteredBooks)
      )
    ]
  })
))

function matchSearch(book: Book.Book, search: string): boolean {
  return Search.match(search, book.title, book.subtitle, ...book.authors)
}