import React, { useEffect, useState } from 'react'
import { RouteComponentProps, useHistory } from 'react-router-dom'
import { getClient, killSession } from '../api'
import { SessionPictures } from './SessionPictures'

type Props = RouteComponentProps<{ clientId: string }>

export const Session = (props: Props) => {
  const history = useHistory()
  const { clientId } = props.match.params
  const [submitted, setSubmitted] = useState(false)

  const handleExit = async () => {
    history.push('/')
  }

  const handleNuke = async () => {
    await killSession(clientId)
    history.push('/')
  }

  useEffect(() => {
    const get = async () => {
      const { activeSession } = await getClient(clientId)
      if (activeSession) setSubmitted(true)
    }

    get()
  })

  return (
    <div>
      <h1>Session for {clientId}</h1>
      <button>Capture</button>
      {submitted && <SessionPictures clientId={clientId} />}
      <div className="controls">
        <button onClick={handleNuke}>Nuke Session</button>
        <button onClick={handleExit}>Exit Session</button>
      </div>
    </div>
  )
}