const { h, register, matter, preactHooks } = globalThis.ami
const { Box, SVG } = matter
const { useState, useEffect } = preactHooks

function StatContent ({ data }) {
  const alignmentMap = { right: 'justify-end', center: 'justify-center' }
  const alignmentClass = alignmentMap[data.customModel.elements.alignment.value] ?? ''
  const prefix = data.customModel.elements.prefix?.value
  const suffix = data.customModel.elements.suffix?.value

  return h('div', { className: 'grow items-center h-full' },
    h('div', { className: 'text-lg font-custom font-bold' }, data.customModel.elements.label.value),
    h('div', { className: `grow flex items-end ${alignmentClass}` },
      prefix && h('div', { className: 'flex items-end text-xl font-custom font-bold' },
        h('div', { className: 'mr-1 mb-1' }, prefix)
      ),
      h('div', { className: 'flex items-end text-5xl font-custom font-bold' },
        h('div', data.customModel.elements.value.value)
      ),
      suffix && h('div', { className: 'flex items-end text-xl font-custom font-bold' },
        h('div', { className: 'ml-1 mb-1' }, suffix)
      )
    )
  )
}

function SingleStat ({ src }) {
  if (!src) {
    console.error('Missing data source.')
    return null
  }

  const [data, setData] = useState()
  useEffect(() => {
    (async () => {
      const res = await fetch(src)
      if (!res.ok) {
        console.error(`Error fetching ${src}. Status: ${res.status}`)
        return
      }
      const json = await res.json()
      setData(json)
    })().catch(console.error)
  }, [src])

  if (!data) {
    return null
  }

  const alignment = data.customModel.elements.alignment?.value
  const icon = data.customModel.elements.icon?.value

  return h(Box, {
    _style: id => `${id} svg path { fill: currentColor }`,
    className: 'text-center rounded-2xl w-full text-txa bg-bga',
    children: h('div', { className: 'items-center h-full text-center w-full' },
      h('div', { className: 'grow items-center h-full justify-center' },
        h('div', { className: 'grow flex items-center h-full justify-center' },
          alignment === 'left' && h('div', { className: 'flex items-end align-bottom' },
            icon && h('div', { className: 'block w-14 h-14' },
              h(SVG, { _model: { src: icon } })
            ),
            icon && h('div', { className: 'w-4' }, ''),
            h(StatContent, { data })
          ),
          alignment === 'right' && h('div', { className: 'flex items-end align-bottom' },
            h(StatContent, { data }),
            icon && h('div', { className: 'w-4' }, ''),
            icon && h('div', { className: 'block w-14 h-14' },
              h(SVG, { _model: { src: icon } })
            )
          ),
          alignment === 'center' && h('div', { className: 'flex items-end align-bottom justify-center' },
            h(StatContent, { data })
          )
        ),
        h('div', { className: 'grow flex items-center h-full justify-center mt-2' },
          h('div', { className: 'text-xs' }, data.customModel.elements.supportingInfo.value)
        )
      )
    )
  })
}

register(SingleStat, 'single-stat')
