// PrinterSelect.js
import PropTypes from 'prop-types'
import { Progress, Flex, Space, Modal, Button, Typography } from 'antd'
import StateTag from './StateTag'
import InfoCircleIcon from '../../Icons/InfoCircleIcon'
import { useState } from 'react'

const { Text } = Typography

const StateDisplay = ({
  state,
  showProgress = true,
  showState = true,
  showMessage = true
}) => {
  const loadingProgressTypes = [
    'loading',
    'processing',
    'queued',
    'printing',
    'used',
    'deploying'
  ]
  const orangeProgressTypes = ['used', 'deploying', 'queued']
  const activeProgressTypes = ['printing', 'deploying']

  const currentState = state || {
    type: 'unknown',
    progress: 0
  }
  const [showMessageModal, setShowMessageModal] = useState(false)
  return (
    <>
      <Flex gap='small' align={'center'}>
        {showState && (
          <Space>
            <StateTag state={currentState.type} />
          </Space>
        )}
        {showProgress &&
        loadingProgressTypes.includes(currentState.type) &&
        currentState?.progress &&
        currentState?.progress > 0 ? (
          <Progress
            percent={Math.round(currentState.progress * 100)}
            status={
              activeProgressTypes.includes(currentState.type) ? 'active' : ''
            }
            strokeColor={
              orangeProgressTypes.includes(currentState.type) ? 'orange' : ''
            }
            style={{ maxWidth: '200px', marginBottom: '2px' }}
          />
        ) : null}

        {showMessage && currentState?.message && (
          <Button
            type='text'
            size='small'
            style={{ padding: '4px' }}
            onClick={() => setShowMessageModal(true)}
          >
            <InfoCircleIcon />
          </Button>
        )}
      </Flex>
      <Modal
        open={showMessageModal}
        onCancel={() => setShowMessageModal(false)}
        footer={null}
      >
        <Text>{currentState.message}</Text>
      </Modal>
    </>
  )
}

StateDisplay.propTypes = {
  state: PropTypes.object,
  showProgress: PropTypes.bool,
  showState: PropTypes.bool,
  showMessage: PropTypes.bool
}

export default StateDisplay