import PropTypes from 'prop-types'
import { Progress, Flex, Space } from 'antd'
import React from 'react'
import StateTag from './StateTag'

const getProgressColor = (percent) => {
  if (percent <= 50) {
    return '#52c41a' // 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 FilamentStockState = ({
  state = { type: 'unknown' },
  showProgress = true,
  showState = true
}) => {
  return (
    <Flex gap='small' align={'center'}>
      {showState && (
        <Space>
          <StateTag state={state.type} />
        </Space>
      )}
      {showProgress && state.type === 'partiallyconsumed' ? (
        <Progress
          percent={Math.round((state.percent || 0) * 100)}
          style={{ width: '150px', marginBottom: '2px' }}
          strokeColor={getProgressColor(Math.round((state.percent || 0) * 100))}
          showInfo={false}
        />
      ) : null}
    </Flex>
  )
}

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

export default FilamentStockState