import { h } from 'preact'
import { useEffect, useState } from 'preact/hooks'
import rek from 'rek'
import Head from './head.ts'
import Object from './object.tsx'
import s from './results_page.module.scss'

const ObjectsPage = () => {
  const [objects, setObjects] = useState([])
  const [currentObject, setCurrentObject] = useState(null)

  useEffect(() => {
    rek('/api/objects').then(setObjects)
  }, [])

  return (
    <section>
      <Head>
        <title> : Objects</title>
      </Head>

      <h1>Objects</h1>
      <div className={s.objects}>
        {objects.map((object) => (
          <button onClick={() => setCurrentObject(object)}>
            {object.dimensionName}: {object.name}
          </button>
        ))}
      </div>

      {currentObject ? (
        <div>
          <h2>{currentObject}</h2>
          <Object objectId={currentObject.id} />
        </div>
      ) : null}
    </section>
  )
}

export default ObjectsPage
