const ICON_CLOSE = `data:image/svg+xml;utf8,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><polygon fill="#595959" points="19.293 3.293 20.707 4.707 13.414 12 20.707 19.293 19.293 20.707 12 13.414 4.707 20.707 3.293 19.293 10.586 12 3.293 4.707 4.707 3.293 12 10.586"/></svg>')}`
const ICON_NEXT = `data:image/svg+xml;utf8,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><polygon fill="#595959" points="7.374 4.324 15.219 12.952 7.407 20.773 8.822 22.187 17.981 13.017 8.854 2.979"/></svg>')}`
const ICON_PREV = `data:image/svg+xml;utf8,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><polygon fill="#595959" points="15.543 4.294 7.699 12.922 15.51 20.743 14.095 22.156 4.937 12.987 14.063 2.949"/></svg>')}`

const { h, matter, preactHooks } = globalThis.ami
const { useState, useEffect } = preactHooks
const { Box, Button, Card, Heading, Popup, Table } = matter

export default function PromoWithPopup ({ models, currentModelIndex = 0 }) {
  const [showPopup, setShowPopup] = useState(false)
  const [popupModelIndex, setPopupModelIndex] = useState(currentModelIndex)

  // Reset current model index when popup is closed.
  useEffect(() => {
    setPopupModelIndex(currentModelIndex)
  }, [showPopup])

  const model = models[currentModelIndex]
  const popupModel = models[popupModelIndex]

  return h('div', { role: 'listitem' },
    h(Card, {
      _model: { value: '#' },
      className: 'block bg-bga text-txa rounded-2xl overflow-hidden h-full transition cursor-pointer transition animate-fade',
      onClick: event => {
        event.preventDefault()
        setShowPopup(true)
      },
      children: h('div', { className: 'flex flex-col' },
        h('img', { src: model.image.src, alt: model.image.alt, className: 'w-full h-full block object-cover aspect-video' }),
        h(Box, { className: 'sm:col-span-1 grow' },
          h(Heading, { _level: 3 }, model.title),
          h('p', model.text)
        )
      )
    }),
    h(Popup, {
      _show: showPopup,
      onKeyDown: event => event.key === 'Escape' && setShowPopup(false),
      _layout: 'toast',
      children: [
        h('div', { className: 'flex gap-2' },
          h('div', { className: 'grow' },
            h(Heading, { _level: 3 }, popupModel.title)
          ),
          h('div', { className: 'grow-0 shrink-0' },
            h(Button, {
              _variant: 'plain',
              _textless: true,
              _size: 'xs',
              _model: { name: 'Close', icon: ICON_CLOSE },
              onClick: () => setShowPopup(false)
            })
          )
        ),
        h('div', { className: 'grid lg:grid-cols-12 sm:grid-cols-1 gap-5' },
          h('img', {
            className: 'lg:col-span-4 w-full rounded-lg object-cover',
            src: popupModel.image.src,
            alt: popupModel.image.alt,
            key: popupModelIndex
          }),
          h('div', { className: 'lg:col-span-8' },
            h(Table,
              popupModel.links.map(link =>
                h('tr',
                  h('th', { className: 'text-right pr-2 w-48' }, link.name),
                  h('td', { className: 'text-left' }, Array.isArray(link.value) ? link.value.join(', ') : link.value)
                )
              )
            )
          )
        ),
        h('div', { className: 'flex gap-2 justify-end' },
          h(Button, {
            disabled: popupModelIndex === 0,
            _textless: true,
            _size: 'sm',
            _model: { name: 'Previous', icon: ICON_PREV },
            onClick: () => setPopupModelIndex(Math.max(popupModelIndex - 1, 0))
          }),
          h(Button, {
            disabled: popupModelIndex === models.length - 1,
            _textless: true,
            _size: 'sm',
            _model: { name: 'Next', icon: ICON_NEXT },
            onClick: () => setPopupModelIndex(Math.min(popupModelIndex + 1, models.length - 1))
          })
        )
      ]
    })
  )
}
