import { h, withVar, mount, Html, Rx } from 'lib/rx'
import * as Book from 'book'
import * as Modal from 'view/components/modal'

export function view(books: Rx<Array<Book.Book>>): Html {
  return h('div',
    { className: 'g-Books' },
    withVar<Book.Book | undefined>(undefined, (focusBook, updateFocusBook) => [
      focusBook.map(book => book && bookDetailModal({
        book,
        onClose: () => updateFocusBook(_ => undefined)
      })),
      books.map(bs => bs.map(book => viewBook({
        book,
        onSelect: (book) => updateFocusBook(_ => book)
      })))
    ])
  )
}

interface ViewBookParams {
  book: Book.Book
  onSelect: (book: Book.Book) => void
}

function viewBook({ book, onSelect }: ViewBookParams): Html {
  return h('button',
    { className: 'g-Book' },
    h('img',
      { src: book.cover,
        className: 'g-Book__Image',
        onclick: () => onSelect(book)
      }
    )
  )
}

interface BookDetailModalParams {
  book: Book.Book
  onClose: () => void
}

function bookDetailModal({ book, onClose }: BookDetailModalParams): Html {
  return Modal.view({
    header: h('div',
      h('div', { className: 'g-BookDetail__Title' }, `${book.title}, ${book.date}`),
      book.subtitle && h('div', { className: 'g-BookDetail__Subtitle' }, book.subtitle)
    ),
    body: h('div',
      { className: 'g-BookDetail' },
      h('img', { src: book.cover }),
      h('dl',
        metadata('Auteur', book.authors),
        metadata('Genre', book.genres)
      )
    ),
    onClose
  })
}

function metadata(term: string, descriptions: Array<string>): Html {
  return h('div',
    h('dt', term, descriptions.length > 1 && 's', ' :'),
    h('dd', ' ', descriptions.join(', '))
  )
}