import { h, withVar, mount } from 'lib/rx'

interface Book {
  title: string
  authors: Array<string>
  authorsSort: string
  genres: Array<string>
  date: string
  read: boolean
  cover: string
}

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

enum Filter {
  All,
  Read,
  Unread
}

const view = withVar(Filter.All, (filter, updateFilter) => [
  h('aside',
    { className: 'g-Aside' },
    h('select',
      { name: 'filter',
        id: 'filter',
        onchange: (event: Event) => updateFilter(_ => (event.target as HTMLSelectElement).value as any)
      },
      h('option', { value: Filter.All }, 'Tous les livres'),
      h('option', { value: Filter.Read }, 'Livres lus'),
      h('option', { value: Filter.Unread }, 'Livres non lus')
    )
  ),
  h('main',
    { className: 'g-Main' },
    filter.map(f =>
      sortedBooks
        .filter(b => f == Filter.All || b.read == (f == Filter.Read))
        .map(book => h('img', { className: 'g-Book', src: book.cover }))
    )
  )
])

mount(view)