import PropTypes from 'prop-types'
import ObjectDisplay from './ObjectDisplay'
import { Steps } from 'antd'
import MissingPlaceholder from './MissingPlaceholder'

const getId = (item) => {
  if (!item) return null
  if (typeof item === 'string') return item
  if (typeof item._id === 'string') return item._id
  if (typeof item._id === 'object' && item._id?._id) return item._id._id
  return null
}

const toObject = (item) => {
  if (!item) return null
  if (typeof item === 'string') return { _id: item }
  return item
}

const PrinterQueue = ({ queue, currentSubJob }) => {
  const queueItems = Array.isArray(queue)
    ? queue.map(toObject).filter(Boolean)
    : []
  const current = toObject(currentSubJob)
  const currentId = getId(current)

  const items = []
  if (current && !queueItems.some((item) => getId(item) === currentId)) {
    items.push(current)
  }
  items.push(...queueItems)

  if (items.length === 0) {
    return (
      <MissingPlaceholder
        message='No sub jobs in queue.'
        hasBackground={false}
        hasBorder={false}
        padding={0}
      />
    )
  }

  const currentIndex = currentId
    ? items.findIndex((item) => getId(item) === currentId)
    : -1

  return (
    <Steps
      current={currentIndex}
      direction='vertical'
      size='small'
      items={items.map((item) => ({
        title: <ObjectDisplay object={item} objectType='subJob' showHyperlink />
      }))}
    />
  )
}

PrinterQueue.propTypes = {
  queue: PropTypes.array,
  currentSubJob: PropTypes.oneOfType([PropTypes.object, PropTypes.string])
}

export default PrinterQueue