import PropTypes from 'prop-types'
import { Badge, Progress, Flex, Space, Tag, Typography } from 'antd'
import { green, red } from '@ant-design/colors'
import React, { useState, useContext, useEffect } from 'react'
import { SocketContext } from '../context/SocketContext'

const FilamentStockState = ({
  filamentStock,
  showProgress = true,
  showStatus = true,
  showFilamentStockName = true
}) => {
  const { socket } = useContext(SocketContext)
  const [badgeStatus, setBadgeStatus] = useState('unknown')
  const [badgeText, setBadgeText] = useState('Unknown')
  const [currentState, setCurrentState] = useState(
    filamentStock?.state || {
      type: 'unknown',
      progress: 0
    }
  )
  const [initialized, setInitialized] = useState(false)
  const { Text } = Typography

  useEffect(() => {
    if (socket && !initialized && filamentStock?._id) {
      setInitialized(true)
      socket.on('notify_filamentstock_update', (statusUpdate) => {
        if (statusUpdate?.id === filamentStock._id && statusUpdate?.state) {
          setCurrentState(statusUpdate.state)
        }
      })
    }
    return () => {
      if (socket && initialized) {
        socket.off('notify_filamentstock_update')
      }
    }
  }, [socket, initialized, filamentStock?._id])

  useEffect(() => {
    switch (currentState.type) {
      case 'unconsumed':
        setBadgeStatus('success')
        setBadgeText('Unconsumed')
        break
      case 'partiallyconsumed':
        setBadgeStatus('warning')
        setBadgeText('Partially Consumed')
        break
      case 'fullyconsumed':
        setBadgeStatus('error')
        setBadgeText('Fully Consumed')
        break
      case 'error':
        setBadgeStatus('error')
        setBadgeText('Error')
        break
      default:
        setBadgeStatus('default')
        setBadgeText(currentState.type)
    }
  }, [currentState])

  return (
    <Flex gap='middle' align={'center'}>
      {showFilamentStockName && <Text>{filamentStock.name}</Text>}
      {showStatus && (
        <Space>
          <Tag color={badgeStatus} style={{ marginRight: 0 }}>
            <Flex gap={6}>
              <Badge status={badgeStatus} />
              {badgeText}
            </Flex>
          </Tag>
        </Space>
      )}
      {showProgress && currentState.type === 'partiallyconsumed' ? (
        <Progress
          percent={Math.round(currentState.percent * 100)}
          style={{ width: '150px', marginBottom: '2px' }}
          steps={7}
          strokeColor={[
            green[5],
            green[5],
            green[5],
            green[4],
            green[3],
            red[4],
            red[5]
          ]}
        />
      ) : null}
    </Flex>
  )
}

FilamentStockState.propTypes = {
  filamentStock: PropTypes.shape({
    _id: PropTypes.string,
    name: PropTypes.string,
    state: PropTypes.shape({
      type: PropTypes.oneOf([
        'unconsumed',
        'partiallyconsumed',
        'fullyconsumed',
        'error',
        'unknown'
      ]),
      progress: PropTypes.number
    })
  }),
  showProgress: PropTypes.bool,
  showStatus: PropTypes.bool,
  showFilamentStockName: PropTypes.bool
}

export default FilamentStockState