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

const { Text } = Typography

const getProgressColor = (percent) => {
  if (percent <= 50) {
    return green[5]
  } else if (percent <= 80) {
    // Interpolate between green and yellow
    const ratio = (percent - 50) / 30
    return `rgb(${Math.round(255 * ratio)}, ${Math.round(255 * (1 - ratio))}, 0)`
  } else {
    // Interpolate between yellow and red
    const ratio = (percent - 80) / 20
    return `rgb(255, ${Math.round(255 * (1 - ratio))}, 0)`
  }
}

const PartStockState = ({
  partStock,
  showProgress = true,
  showStatus = true
}) => {
  const [badgeStatus, setBadgeStatus] = useState('unknown')
  const [badgeText, setBadgeText] = useState('Unknown')
  const [currentState] = useState(
    partStock?.state || {
      type: 'unknown',
      progress: 0
    }
  )

  useEffect(() => {
    switch (currentState.type) {
      case 'unused':
        setBadgeStatus('success')
        setBadgeText('Unused')
        break
      case 'partiallyused':
        setBadgeStatus('warning')
        setBadgeText('Partial')
        break
      case 'fullyused':
        setBadgeStatus('error')
        setBadgeText('Used')
        break
      case 'error':
        setBadgeStatus('error')
        setBadgeText('Error')
        break
      default:
        setBadgeStatus('default')
        setBadgeText(currentState.type)
    }
  }, [currentState])

  return (
    <Flex gap='middle' align={'center'}>
      {showStatus && (
        <Space>
          <Tag color={badgeStatus} style={{ marginRight: 0 }}>
            <Flex gap={6}>
              <Badge status={badgeStatus} />
              {badgeText}
            </Flex>
          </Tag>
        </Space>
      )}
      {showProgress && currentState.type === 'partiallyused' ? (
        <Flex style={{ width: '150px' }} gap={'small'}>
          <div style={{ flexGrow: '1' }}>
            <Progress
              percent={Math.round(currentState.percent * 100)}
              style={{ marginBottom: '2px', width: '100%' }}
              strokeColor={getProgressColor(
                Math.round(currentState.percent * 100)
              )}
              showInfo={false}
            />
          </div>
          <Text style={{ marginTop: '1px' }}>
            {Math.round(currentState.percent * 100) + '%'}
          </Text>
        </Flex>
      ) : null}
    </Flex>
  )
}

PartStockState.propTypes = {
  partStock: PropTypes.shape({
    _id: PropTypes.string,
    name: PropTypes.string,
    state: PropTypes.shape({
      type: PropTypes.oneOf([
        'unused',
        'partiallyused',
        'fullyused',
        'error',
        'unknown'
      ]),
      progress: PropTypes.number
    })
  }),
  showProgress: PropTypes.bool,
  showStatus: PropTypes.bool
}

export default PartStockState