import React, { useEffect, useState } from 'react'
import { Card, message, Modal, PageHeader, Spin } from 'antd'
import { getSession } from '../api'

type Props = {
  clientId: string
}

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

  const handleSync = async () => {
    message.info('Syncing photos...')
    const { photos } = await getSession(clientId)
    if (photos.length) setUrls(photos)
  }

  useEffect(() => {
    const get = async () => {
      if (urls && urls.length >= 89 * 2) {
        setLoading(false)
        return
      }

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

    const interval = setInterval(get, 250)

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

  const closeModal = () => setActiveUrl(null)

  const host =
    process.env.NODE_ENV === 'development' ? 'http://192.168.1.107:5000' : ''

  if (!urls?.length) return null

  return (
    <>
      <Modal
        visible={!!activeUrl}
        onOk={closeModal}
        cancelText={null}
        onCancel={closeModal}
        width="50%"
      >
        <img
          width="100%"
          onClick={closeModal}
          src={`${host}/output/${clientId}/${activeUrl}`}
          alt="large image"
        ></img>
      </Modal>
      <PageHeader
        title="Session Pictures"
        subTitle={`${urls.length}/${89 * 2} loaded`}
      ></PageHeader>
      <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
                  onClick={() => setActiveUrl(src)}
                  key={src}
                  id={src}
                  src={`${host}/output/${clientId}/${src}`}
                  alt="lol"
                />
              </Card>
            ))
        ) : (
          <Spin />
        )}
      </div>
    </>
  )
}