import { Currency, Locale, Price } from '../PaymentTable'
import { IPrice } from '../PriceList'
import styles from './styles.module.css'

const currency = Currency.USD
const locale = Locale.EN

const roundToWhole = (value: string | number): number => {
    value = Number(value)
    if (value % Math.floor(value) !== 0) {
        return value
    }
    return Math.floor(value)
}

const removeAfterDot = (value: string): string => {
    const _value = Number(value.split('$')[1])
    if (_value % Math.floor(_value) !== 0 && _value !== 0) {
        return value
    }
    return value.split('.')[0]
}

interface PriceItemProps {
  active: boolean
  click: () => void
}

function PriceItem({ id, value, active, click }: IPrice & PriceItemProps): JSX.Element {
  const _price = new Price(roundToWhole(value), currency, locale)

  const compatClassName = () => {
    const isPopular = id === 3
    const isActive = active
    return `${styles.container} ${isPopular ? styles.popular : ''} ${isActive ? styles.active : ''}`
  }

  return (
    <div onClick={click} className={compatClassName()}>
      {removeAfterDot(_price.format())}
    </div>
  )
}

export default PriceItem