import PropTypes from 'prop-types'
import { Progress, Flex, Button, Space, Tooltip } from 'antd' // eslint-disable-line
import { CaretLeftOutlined } from '@ant-design/icons' // eslint-disable-line
import React, { useContext } from 'react'
import { PrintServerContext } from '../context/PrintServerContext'
import IdDisplay from './IdDisplay'
import StateTag from './StateTag'
import XMarkIcon from '../../Icons/XMarkIcon'
import PauseIcon from '../../Icons/PauseIcon'
import BinIcon from '../../Icons/BinIcon'
import config from '../../../config'
import loglevel from 'loglevel'
const logger = loglevel.getLogger('SubJobState')
logger.setLevel(config.logLevel)

const SubJobState = ({
  state,
  showStatus = true,
  showId = true,
  showProgress = true,
  showControls = true //eslint-disable-line
}) => {
  const { printServer } = useContext(PrintServerContext)
  const currentState = state || {
    type: 'unknown',
    progress: 0
  }
  return (
    <Flex gap='small' align={'center'}>
      {showId && state?._id && (
        <IdDisplay
          id={state._id}
          showCopy={false}
          type='subjob'
          longId={false}
        />
      )}
      {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}
      {showControls &&
      (currentState.type === 'printing' || currentState.type === 'paused') &&
      state?.printer ? (
        <Space.Compact>
          <Tooltip
            title={currentState.type === 'printing' ? 'Pause' : 'Resume'}
            arrow={false}
          >
            <Button
              onClick={() => {
                if (currentState.type === 'printing') {
                  printServer.emit('printer.print.pause', {
                    printerId: state.printer
                  })
                } else {
                  printServer.emit('printer.print.resume', {
                    printerId: state.printer
                  })
                }
              }}
              style={{ height: '22px' }}
              type='text'
              icon={
                currentState.type === 'printing' ? (
                  <PauseIcon
                    style={{ fontSize: '12px', marginBottom: '3px' }}
                  />
                ) : (
                  <CaretLeftOutlined
                    style={{ fontSize: '10px', marginBottom: '3px' }}
                  />
                )
              }
            ></Button>
          </Tooltip>
          <Tooltip title='Cancel' arrow={false}>
            <Button
              onClick={() => {
                printServer.emit('printer.print.cancel', {
                  printerId: state.printer
                })
              }}
              type='text'
              style={{ height: '22px' }}
              icon={
                <XMarkIcon style={{ fontSize: '12px', marginBottom: '3px' }} />
              }
            />
          </Tooltip>
        </Space.Compact>
      ) : null}
      {showControls && currentState.type === 'queued' && state?._id ? (
        <Tooltip title='Cancel' arrow={false}>
          <Button
            onClick={() => {
              printServer.emit('server.job_queue.cancel', {
                subJobId: state._id
              })
            }}
            style={{ height: '22px' }}
            type='text'
            icon={
              <XMarkIcon style={{ fontSize: '12px', marginBottom: '3px' }} />
            }
          />
        </Tooltip>
      ) : null}
      {showControls && currentState.type === 'draft' ? (
        <Space>
          <Tooltip title='Delete' arrow={false}>
            <Button
              onClick={() => {
                logger.debug('Hello')
              }}
              type='text'
              style={{ height: 'unset' }}
              icon={
                <BinIcon style={{ fontSize: '14px', marginBottom: '2px' }} />
              }
            />
          </Tooltip>
        </Space>
      ) : null}
    </Flex>
  )
}

SubJobState.propTypes = {
  state: PropTypes.object,
  showProgress: PropTypes.bool,
  showControls: PropTypes.bool,
  showId: PropTypes.bool,
  showStatus: PropTypes.bool
}

export default SubJobState
