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

const JobState = ({ state, showProgress = true, showState = true }) => {
  const [currentState, setCurrentState] = useState(
    state || { type: 'unknown', progress: 0 }
  )

  useEffect(() => {
    if (state) {
      setCurrentState(state)
    }
  }, [state])

  return (
    <Flex gap='small' align={'center'}>
      {showState && (
        <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 = {
  state: PropTypes.object,
  showProgress: PropTypes.bool,
  showState: PropTypes.bool
}

export default JobState
