import React, { useEffect, useState } from 'react'
import { Card, Spin } from 'antd'
import { getSession } from '../api'
import { client } from '../data'
import settings from '../settings'
import { url } from 'inspector'

type Props = {
  clientId: string
}

export const SessionPictures = ({ clientId }: Props) => {
  const [urls, setUrls] = useState<string[] | null>(null)

  useEffect(() => {
    const get = async () => {
      if (urls) return

      const { photos } = await getSession(clientId)
      if (photos.length) setUrls(photos)
    }

    const interval = setInterval(get, 5000)

    return () => clearInterval(interval)
  }, [clientId, urls])

  const host = settings.env === 'jank' ? 'http://192.168.1.107:5000' : ''

  if (!urls?.length) return null

  return (
    <div>
      <h3>Session Pictures</h3>
      <div className="photo-wall">
        {urls ? (
          urls
            .sort((a, b) => a.split('_')[0].localeCompare(b.split('_')[0]))
            .map((src) => (
              <Card className="photo" title={src.split('_')[0]}>
                <img
                  key={src}
                  id={src}
                  src={`${host}/output/${clientId}/${src}`}
                  alt="lol"
                />
              </Card>
            ))
        ) : (
          <Spin />
        )}
      </div>
    </div>
  )
}