import { Input } from "@/components/ui/chadcn-input"
import { Label } from "@/components/ui/label"
import TranslateClient from "@/components/ui/localization/TranslateClient"
import { OrderSummaryInterface } from "@/modules/products/order-history"
import React from "react"

interface OrderSummaryProps {
  summary: OrderSummaryInterface
  isSummaryView?: boolean
}

export const InvoiceSummary: React.FC<OrderSummaryProps> = ({ summary, isSummaryView }) => {
  const couponApplied = summary?.Type_coupon !== "No coupon applied"

  return (
    <>
      {couponApplied && isSummaryView && (
        <div className="mb-4">
          <Label>
            <TranslateClient text="discount_coupon" />
          </Label>
          <Input disabled value={summary?.Name_coupon} className="border-gray-100 mt-2" />
        </div>
      )}

      <div className="flex items-center justify-between gap-2 mb-4 flex-wrap text-gray-500">
        <p>
          <TranslateClient text="product_price_before" />
        </p>
        <p>
          {summary?.totalPriceBefore} <TranslateClient text="sr" />
        </p>
      </div>
      <div className="flex items-center justify-between gap-2 mb-4 flex-wrap text-gray-500">
        <p>
          <TranslateClient text="product_price_after" />
        </p>
        <p>
          {summary?.totalPriceAfterDiscount} <TranslateClient text="sr" />
        </p>
      </div>
      {couponApplied && (
        <>
          {summary?.Type_coupon?.includes("%") && (
            <div className="flex items-center justify-between gap-2 mb-4 flex-wrap text-gray-500">
              <p>
                <TranslateClient text="coupon_type" />
              </p>
              <p>{summary?.Type_coupon}</p>
            </div>
          )}
          <div className="flex items-center justify-between gap-2 mb-4 flex-wrap text-gray-500">
            <p>
              <TranslateClient text="coupon_value" />
            </p>
            <p>
              {summary?.Pricecoupon} <TranslateClient text="sr" />
            </p>
          </div>
        </>
      )}

      <div className="flex items-center justify-between gap-2 mb-4 flex-wrap text-gray-500">
        <p>
          <TranslateClient text="product_tax" />
        </p>
        <p>{summary?.taxRate}%</p>
      </div>
      <div className="flex items-center justify-between gap-2 mb-4 flex-wrap text-gray-500">
        <p>
          <TranslateClient text="product_tax_value" />
        </p>
        <p>
          {summary?.Value_Tax} <TranslateClient text="sr" />
        </p>
      </div>

      <div className="flex items-center justify-between gap-2 mb-4 flex-wrap text-mainLime font-bold">
        <p>
          <TranslateClient text="total" />
        </p>
        <p>
          {summary?.TotalwithTax} <TranslateClient text="sr" />
        </p>
      </div>
    </>
  )
}