import PropTypes from 'prop-types';

function OrderItemsTable(props) {
  const { orderItems, code, totalPrice, discountPrice, paymentPrice, creditPrice } = props;
  return (
    <div className='my-4'>
      <p className='font-medium'>بسته‌های انتخاب شده:</p>
      <table className='my-4 w-full border-collapse border border-green-600 lg:w-1/2'>
        <thead>
          <tr>
            <th className='border border-green-400 py-1.5'>#</th>
            <th className='border border-green-400 py-1.5'>نام بسته</th>
            <th className='border border-green-400 py-1.5'>قیمت بسته</th>
          </tr>
        </thead>
        <tbody>
          {orderItems
            .sort((d1, d2) => d2.item.weight - d1.item.weight)
            .map((deck, index) => (
              <tr key={deck.id}>
                <td className='border border-green-400 py-1.5 text-center'>{index + 1}</td>
                <td className='border border-green-400 py-1.5 text-center'>{deck.name}</td>
                <td className='border border-green-400 py-1.5 text-center'>
                  <span>{deck.price ? `${deck.price.toLocaleString()} ریال` : 'رایگان'}</span>
                </td>
              </tr>
            ))}
        </tbody>
        <tfoot>
          <tr>
            <td className='border border-green-400 py-1.5 text-center font-medium' colSpan={2}>
              مجموع
            </td>
            <td className='border border-green-400 py-1.5 text-center font-medium'>
              {totalPrice ? `${totalPrice.toLocaleString()} ریال` : 'رایگان'}
            </td>
          </tr>
          {discountPrice !== totalPrice && (
            <tr>
              <td className='border border-green-400 py-1.5 text-center font-medium' colSpan={2}>
                مجموع پس از اعمال تخفیف معرف
              </td>
              <td className='border border-green-400 py-1.5 text-center font-medium'>
                {`${discountPrice.toLocaleString()} ریال`}
              </td>
            </tr>
          )}

          {!!code && (
            <tr>
              <td className='border border-green-400 py-1.5 text-center font-medium' colSpan={2}>
                <span>مجموع پس از اعمال کد تخفیف </span>
                <span>{` (${code.amount}%) `}</span>
                <span>{code.text === ALL_IN_ONE_CODE_TEXT ? 'خرید همه بسته‌ها' : code.text}</span>
              </td>
              <td className='border border-green-400 py-1.5 text-center font-medium'>
                {`${paymentPrice.toLocaleString()} ریال`}
              </td>
            </tr>
          )}
          {props.creditPrice !== 0 && (
            <tr>
              <td className='border border-green-400 py-1.5 text-center font-medium' colSpan={2}>
                <span>مجموع پس از کسر مبلغ </span>
                <span>{`${creditPrice.toLocaleString()} ریال`}</span>
                <span> از اعتبار شما</span>
              </td>
              <td className='border border-green-400 py-1.5 text-center font-medium'>
                {`${(props.paymentPrice - props.creditPrice).toLocaleString()} ریال`}
              </td>
            </tr>
          )}
        </tfoot>
      </table>
    </div>
  );
}

const ALL_IN_ONE_CODE_TEXT = '_AllInOne';

OrderItemsTable.propTypes = {
  orderItems: PropTypes.array.isRequired,
  code: PropTypes.object,
  totalPrice: PropTypes.number.isRequired,
  paymentPrice: PropTypes.number.isRequired,
  discountPrice: PropTypes.number.isRequired,
  creditPrice: PropTypes.number.isRequired
};

export default OrderItemsTable;
