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

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

const fetch_options = {}

function Link(props) {
  return <a {...props} target="_blank" rel="noopener noreferrer" />
}

function Facebook({ event_id }) {
  const facebook_event_url = `https://facebook.com/events/${event_id}/`
  return (
    <Link href={facebook_event_url} title="Åpne facebookarrangement.">
      Mer info
    </Link>
  )
}

function Tickets({ ticket_url }) {
  return (
    <Link href={ticket_url} title="Kjøp billett hos kultar.">
      Kjøp billett
    </Link>
  )
}

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 Links({ event_id, ticket_url }) {
  if (ticket_url !== null) {
    return (
      <>
        <Tickets ticket_url={ticket_url} />
        &nbsp;–&nbsp;
        <Facebook event_id={event_id} />
      </>
    )
  }

  return <Facebook event_id={event_id} />
}

function EventImage({ images }) {
  const { square = null } = images
  return (
    <img
      className="event-image"
      src={`https://kultar.sout.no/events/${square}`}
    />
  )
}

function EventCard({ event }) {
  const { name, location, date, ticket_url, event_id } = event
  const { start: start_date } = date
  return (
    <span className="event-card">
      <h3>{name}</h3>
      <Time date={new Date(start_date)} />
      <Links ticket_url={ticket_url} event_id={event_id} />
      <Location location={location} />
    </span>
  )
}

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

  return (
    <div className="event">
      <EventImage images={images} />
      <EventCard event={event} />
    </div>
  )
}

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 (
    <div>
      {events.map((event, index) => (
        <>
          <Event event={event} index={index} />
        </>
      ))}
    </div>
  )
}