import PropTypes from 'prop-types'
import { Typography, Tag } from 'antd' // eslint-disable-line
import {
  CheckCircleOutlined,
  PauseCircleOutlined,
  QuestionCircleOutlined,
  PlayCircleOutlined,
  CloseCircleOutlined
} from '@ant-design/icons' // eslint-disable-line
import React, { useState, useContext, useEffect } from 'react'
import { SocketContext } from '../context/SocketContext'

const SubJobCounter = ({
  job,
  showIcon = true,
  state = { type: 'complete' }
}) => {
  const { socket } = useContext(SocketContext)
  const [initialized, setInitialized] = useState(false)
  var badgeStatus = 'unknown'
  var badgeIcon = <QuestionCircleOutlined />
  const [subJobs, setSubJobs] = useState(job.subJobs)

  const [count, setCount] = useState(0)

  useEffect(() => {
    if (socket && !initialized && job?.id) {
      setInitialized(true)
      console.log('on notify_subjob_update')
      socket.on('notify_subjob_update', (statusUpdate) => {
        for (const subJob of job.subJobs) {
          if (statusUpdate?._id === subJob.id && statusUpdate?.state) {
            console.log('statusUpdate', statusUpdate)
            setSubJobs((prev) => [...prev, statusUpdate])
          }
        }
      })
    }
    return () => {
      if (socket && initialized) {
        console.log('off notify_subjob_update')
        socket.off('notify_subjob_update')
      }
    }
  }, [socket, initialized, job?.subJobs, job?.id])

  switch (state.type) {
    case 'draft':
      badgeStatus = 'default'
      badgeIcon = <QuestionCircleOutlined />
      break
    case 'printing':
      badgeStatus = 'processing'
      badgeIcon = <PlayCircleOutlined />
      break
    case 'complete':
      badgeStatus = 'success'
      badgeIcon = <CheckCircleOutlined />
      break
    case 'failed':
      badgeStatus = 'error'
      badgeIcon = <CloseCircleOutlined />
      break
    case 'queued':
      badgeStatus = 'warning'
      badgeIcon = <PauseCircleOutlined />
      break
    case 'paused':
      badgeStatus = 'warning'
      badgeIcon = <PauseCircleOutlined />
      break
    case 'cancelled':
      badgeIcon = <CloseCircleOutlined />
      break
    default:
      badgeStatus = 'default'
  }

  useEffect(() => {
    setCount(0)
    for (let subJob of subJobs) {
      if (subJob.state.type === state.type) {
        setCount((prevCount) => prevCount + 1)
      }
    }
  }, [subJobs, state.type])

  return (
    <Tag
      count={badgeIcon}
      color={badgeStatus}
      icon={showIcon ? badgeIcon : null}
    >
      {count.toString()}
    </Tag>
  )
}

SubJobCounter.propTypes = {
  state: PropTypes.shape({
    type: PropTypes.string
  }),
  job: PropTypes.shape({
    id: PropTypes.string,
    subJobs: PropTypes.arrayOf(
      PropTypes.shape({
        id: PropTypes.string,
        subJobId: PropTypes.string,
        state: PropTypes.shape({
          type: PropTypes.string,
          progress: PropTypes.number
        })
      })
    )
  }),
  showIcon: PropTypes.bool
}

export default SubJobCounter