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({
    content: h('div',
      { className: 'g-BookDetail' },
      h('div',
        h('div', { className: 'g-BookDetail__Title' }, `${book.title}, ${book.date}`),
        book.subtitle && h('div', { className: 'g-BookDetail__Subtitle' }, book.subtitle),
        book.authors.join(', '),
        h('div',
          { className: 'g-BookDetail__Genres' },
          book.genres.length > 1 ? 'Genres : ' : 'Genre : ',
          book.genres.join(', ')
        )
      ),
      h('img', { src: book.cover })
    ),
    onClose
  })
}