import PropTypes from 'prop-types'
import { Progress, Flex, Typography, Space } from 'antd'
import React, { useState, useContext, useEffect } from 'react'
import { PrintServerContext } from '../context/PrintServerContext'
import IdDisplay from './IdDisplay'
import StateTag from './StateTag'

const JobState = ({
  job,
  showProgress = true,
  showStatus = true,
  showId = true,
  showQuantity = true
}) => {
  const { printServer } = useContext(PrintServerContext)
  const [currentState, setCurrentState] = useState(
    job?.state || { type: 'unknown', progress: 0 }
  )
  const [initialized, setInitialized] = useState(false)
  const { Text } = Typography

  useEffect(() => {
    if (printServer && !initialized && job?._id) {
      setInitialized(true)
      printServer.on('notify_job_update', (statusUpdate) => {
        if (statusUpdate?._id === job._id && statusUpdate?.state) {
          setCurrentState(statusUpdate.state)
        }
      })
    }
    return () => {
      if (printServer && initialized) {
        printServer.off('notify_job_update')
      }
    }
  }, [printServer, initialized, job?._id])

  return (
    <Flex gap='small' align={'center'}>
      {showId && (
        <IdDisplay id={job._id} showCopy={false} type='job' longId={false} />
      )}
      {showQuantity && <Text>({job.quantity})</Text>}
      {showStatus && (
        <Space>
          <StateTag state={currentState?.type} />
        </Space>
      )}
      {showProgress &&
      (currentState.type === 'printing' ||
        currentState.type === 'processing') ? (
        <Progress
          percent={Math.round(currentState.progress * 100)}
          status='active'
          style={{ width: '150px', marginBottom: '2px' }}
        />
      ) : null}
    </Flex>
  )
}

JobState.propTypes = {
  job: PropTypes.shape({
    _id: PropTypes.string,
    quantity: PropTypes.number,
    state: PropTypes.shape({
      type: PropTypes.string,
      progress: PropTypes.number
    })
  }),
  showProgress: PropTypes.bool,
  showQuantity: PropTypes.bool,
  showId: PropTypes.bool,
  showStatus: PropTypes.bool
}

export default JobState