import { useState, useContext, useEffect } from 'react'
import PropTypes from 'prop-types'
import WizardView from '../../common/WizardView'
import { ApiServerContext } from '../../context/ApiServerContext'
import { Flex, Typography } from 'antd'
import ObjectTable from '../../common/ObjectTable'
import ObjectSelect from '../../common/ObjectSelect'

const { Text } = Typography

const DeployJob = ({ onOk, objectData = undefined }) => {
  const [deployLoading, setDeployLoading] = useState(false)
  const [job, setJob] = useState(objectData)
  const [deployedSubJobsCount, setDeployedSubJobsCount] = useState(0)
  const [subJobsCount, setSubJobsCount] = useState(999)
  const { sendObjectAction, fetchObjects } = useContext(ApiServerContext)

  const handleDeploy = async () => {
    setDeployLoading(true)
    var hasMore = true
    var currentPage = 1
    var subJobs = []
    while (hasMore == true) {
      const subJobsPage = await fetchObjects('subJob', {
        page: currentPage,
        filter: { 'job._id': job._id }
      })
      subJobs = [...subJobs, ...subJobsPage.data]
      if (subJobsPage.data.length >= 25) {
        currentPage = currentPage + 1
      } else {
        hasMore = false
      }
    }
    setSubJobsCount(subJobs.length)
    subJobs.forEach((subJob) => {
      console.log(
        'Deploying subjob:',
        subJob._id,
        'to printer:',
        subJob.printer._id
      )
      sendObjectAction(
        subJob.printer._id,
        'printer',
        { type: 'deploy', data: subJob },
        (result) => {
          console.log('result', result)
          setDeployedSubJobsCount((prev) => prev + 1)
        }
      )
    })
  }

  useEffect(() => {
    if (deployedSubJobsCount == subJobsCount && deployLoading == true) {
      onOk()
    }
  }, [deployedSubJobsCount, subJobsCount, deployLoading])

  const steps = [
    {
      title: 'Confirm',
      key: 'confirm',
      content: (
        <Flex vertical gap={'middle'} style={{ width: '100%' }}>
          <Flex gap={'small'} align='center' style={{ width: '100%' }}>
            <Text type='secondary'>Job:</Text>
            <ObjectSelect
              type={'job'}
              style={{ flexGrow: 1 }}
              value={objectData}
              onChange={(newJob) => {
                setJob(newJob)
              }}
            />
          </Flex>

          <ObjectTable
            type={'subJob'}
            scrollHeight={'200px'}
            visibleColumns={{
              printer: false,
              'job._id': false,
              'printer._id': false
            }}
            masterFilter={{ 'job._id': job?._id }}
            size={'small'}
          />
        </Flex>
      )
    }
  ]

  return (
    <WizardView
      steps={steps}
      loading={deployLoading}
      formValid={objectData != undefined}
      title='Deploy Job'
      showSteps={false}
      submitText='Deploy'
      progress={(deployedSubJobsCount / subJobsCount) * 100}
      onSubmit={() => {
        handleDeploy()
      }}
    />
  )
}

DeployJob.propTypes = {
  onOk: PropTypes.func.isRequired,
  objectData: PropTypes.object,
  reset: PropTypes.bool
}

export default DeployJob