import React from 'react'
import { observer } from 'mobx-react-lite'
import { t } from '$themelocalization'
import { ExpandableList } from './ExpandableList'
import './ProductProperties.scss'

const ProductProperties = ({ item, product, quantityConfig }) => {
  const getPackSize = () =>
    `${product.unit.quantity} ${product.unit.quantity > 1 ? product.unit.plural : product.unit.singular} / ${product.unit.packSingular}`
   const uploadDimension = item.attributes?.find(i => i.Name === "UploadedDocumentDimensions")
   const showRecipients = quantityConfig && !quantityConfig.Changeable && item.numRecipients > 1 && item.quantityPerRecipient

  return (
    <div className="cart-item-properties">
      {item.properties.length > 0 || uploadDimension ? <ExpandableList uploadDimension={uploadDimension?.Value} properties={item.properties}/> : null}
      {product.packSingular && <div className="property">({getPackSize()})</div>}
      {showRecipients && (
        // the condition numRecipients > 1 is there because we can't distinguish between product types
        // it was decided between @Nachman and @Oleksii 07/04/23
        <div className="recipients">
          <div className="property">{t('Cart.Item.Recipients')}: {item.numRecipients}</div>
          <div className="property">{t('Cart.Item.Quantity')}: {item.quantityPerRecipient}</div>
        </div>
      )}
    </div>
  )
}

export default observer(ProductProperties)
