'use client';

import React from 'react';

import { formatCurrency } from '@/packages/shared/src/utils';
import { StoreOrder } from '@medusajs/types';
import { useTranslation } from 'react-i18next';

import { Trans } from '@kit/ui/trans';

const PaymentProviderIds = {
  COMPANY_BENEFITS: 'pp_company-benefits_company-benefits',
  MONTONIO: 'pp_montonio_montonio',
};

export default function CartTotals({
  medusaOrder,
}: {
  medusaOrder: StoreOrder;
}) {
  const {
    i18n: { language },
  } = useTranslation();
  const {
    currency_code,
    total,
    subtotal,
    discount_total,
    gift_card_total,
    payment_collections,
  } = medusaOrder;

  const montonioPayment = payment_collections?.[0]?.payments?.find(
    ({ provider_id }) => provider_id === PaymentProviderIds.MONTONIO,
  );
  const companyBenefitsPayment = payment_collections?.[0]?.payments?.find(
    ({ provider_id }) => provider_id === PaymentProviderIds.COMPANY_BENEFITS,
  );

  return (
    <div>
      <div className="txt-medium text-ui-fg-subtle flex flex-col gap-y-2">
        <div className="flex items-center justify-between">
          <span className="flex items-center gap-x-1">
            <Trans i18nKey="cart:order.subtotal" />
          </span>
          <span data-testid="cart-subtotal" data-value={subtotal || 0}>
            {formatCurrency({
              value: subtotal ?? 0,
              currencyCode: currency_code,
              locale: language,
            })}
          </span>
        </div>
        {!!discount_total && (
          <div className="flex items-center justify-between">
            <span>
              <Trans i18nKey="cart:order.promotionsTotal" />
            </span>
            <span
              className="text-ui-fg-interactive"
              data-testid="cart-discount"
              data-value={discount_total || 0}
            >
              -{' '}
              {formatCurrency({
                value: discount_total ?? 0,
                currencyCode: currency_code,
                locale: language,
              })}
            </span>
          </div>
        )}
        {/* <div className="flex justify-between">
          <span className="flex gap-x-1 items-center ">
            <Trans i18nKey="cart:orderConfirmed.taxes" />
          </span>
          <span data-testid="cart-taxes" data-value={tax_total || 0}>
            {formatCurrency({ value: tax_total ?? 0, currencyCode: currency_code, locale: language })}
          </span>
        </div> */}
        {!!gift_card_total && (
          <div className="flex items-center justify-between">
            <span>
              <Trans i18nKey="cart:order.giftCard" />
            </span>
            <span
              className="text-ui-fg-interactive"
              data-testid="cart-gift-card-amount"
              data-value={gift_card_total || 0}
            >
              -{' '}
              {formatCurrency({
                value: gift_card_total ?? 0,
                currencyCode: currency_code,
                locale: language,
              })}
            </span>
          </div>
        )}
      </div>

      <div className="my-4 h-px w-full border-b border-gray-200" />

      <div className="text-ui-fg-base txt-medium mb-2 flex items-center justify-between">
        <span className="font-bold">
          <Trans i18nKey="cart:order.total" />
        </span>
        <span
          className="txt-xlarge-plus"
          data-testid="cart-total"
          data-value={total || 0}
        >
          {formatCurrency({
            value: total ?? 0,
            currencyCode: currency_code,
            locale: language,
          })}
        </span>
      </div>

      <div className="my-4 h-px w-full border-b border-gray-200" />

      <div className="txt-medium text-ui-fg-subtle flex flex-col gap-y-2">
        {companyBenefitsPayment && (
          <div className="flex items-center justify-between">
            <span className="flex items-center gap-x-1">
              <Trans i18nKey="cart:order.benefitsTotal" />
            </span>
            <span
              data-testid="cart-subtotal"
              data-value={companyBenefitsPayment.amount || 0}
            >
              -{' '}
              {formatCurrency({
                value: companyBenefitsPayment.amount ?? 0,
                currencyCode: currency_code,
                locale: language,
              })}
            </span>
          </div>
        )}

        {montonioPayment && (
          <div className="flex items-center justify-between">
            <span className="flex items-center gap-x-1">
              <Trans i18nKey="cart:order.montonioTotal" />
            </span>
            <span
              data-testid="cart-subtotal"
              data-value={montonioPayment.amount || 0}
            >
              -{' '}
              {formatCurrency({
                value: montonioPayment.amount ?? 0,
                currencyCode: currency_code,
                locale: language,
              })}
            </span>
          </div>
        )}
      </div>
    </div>
  );
}
