import { useEffect, useState } from 'preact/hooks'

const endpoint = 'https://kultar.sout.no/events/'
const fetch_options = {}

function Tickets({ ticket_link }) {
  console.log(ticket_link)
  return <a href="">Biletter</a>
}

function Time({ date }) {
  const hasTime = date.getHours() === 0
  const time_option = hasTime ? undefined : 'numeric'
  const options = {
    month: 'long',
    weekday: 'long',
    day: 'numeric',
    hour: time_option,
    minute: time_option,
  }
  return <h4>{new Intl.DateTimeFormat('no', options).format(date)}</h4>
}

function Location({ location }) {
  const { location: area, host } = location
  const hasHost = host.length !== 0
  const hasArea = area.length !== 0

  if (hasHost && hasArea) {
    return (
      <p>
        {host}, {area}.
      </p>
    )
  }

  if (hasHost) {
    return <p>{host}.</p>
  }

  if (hasArea) {
    return <p>{area}.</p>
  }

  return ''
}

function EventCard({ event }) {
  const { event_id, name, location, date, ticket_link } = event

  return (
    <div>
      <h3>{name}</h3>
      <Time date={new Date(date)} />
      <Tickets ticket_link={ticket_link} />
      <Location location={location} />
    </div>
  )
}

function Event({ event, index }) {
  const isFirstEvent = index === 0

  /* if (isFirstEvent) {
   *   return <EventCard event={event} />
   * } */

  return (
    <>
      <EventCard event={event} />
      <hr />
    </>
  )
}

export default function Events() {
  const [events, setEvents] = useState(null)

  useEffect(async () => {
    const res = await fetch(endpoint, fetch_options)
    const result = await res.json()
    setEvents(result)
  }, [])

  if (events === null) {
    return <p>Laster arrangement...</p>
  }

  if (events.length <= 0) {
    return <p>Det er ingen fremtidige arrangement.</p>
  }

  return (
    <>
      {events.map((event, index) => (
        <Event event={event} index={index} />
      ))}
    </>
  )
}