"use client";

import React, { useState } from "react";
import { useTranslations } from "next-intl";
import { MdKeyboardArrowLeft } from "react-icons/md";
import { Input, Button, Tabs, Spin } from "antd";
import LocalePath from "@/components/UiComponents/LocalePath";
import {GreenDiscountIcon,InvoiceIcon,WhiteArrowIcon,} from "@/assets/svgs/Icons";
import CouponModal from "./CouponModal";
import { useDispatch, useSelector } from "react-redux";
import { AppDispatch, RootState } from "@/store/store";
import { ApplyCoupon, getAllCartItems, setCouponCode } from "@/store/cart";

interface Props {
  isCheckout?: boolean;
  className?: string;
  isOrder?: boolean;
  loading?: boolean;
  createOrder?:any;
  orderDetails:any;
  cartLength:any;
}
const OrderSummary = ({ 
  isCheckout=false, 
  isOrder=false,
  createOrder,
  loading=false,
  orderDetails,
  cartLength
}: Props) => {

  const t = useTranslations("");
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [couponInput, setCouponInput] = useState<any>(null);
  const {discount_code} = useSelector((state:RootState)=>state.cartConfig)
  const dispatch = useDispatch<AppDispatch>();

  const handleSubmit = () => {
    if(discount_code){
      setCouponInput(null)
      dispatch(getAllCartItems())
      dispatch(setCouponCode(null))
    }else{
      dispatch(ApplyCoupon({code:couponInput}))
    }
  };
  
  const approximateNumber = (value:string)=>{
    return Number(value).toFixed(1)
  }

  return (
    <Spin spinning={loading} >
      <div className="bg-white   font-semibold rounded-xl p-5 ">
        <h2 className="capitalize font-bold sm:text-xl mb-5">
          {isOrder ? (
            <div className="flex items-center gap-2">
              <InvoiceIcon/>
              {t("Text.invoiceSummary")}
            </div>
          ) : (
            t(isCheckout ? "Text.checkoutSummary" : "Text.orderSummary")
          )}
        </h2>
        {!isCheckout && !isOrder && (
          <>
            <div className="mb-4 relative">
              <Input
                placeholder={t("Text.enterCoupon")}
                value={couponInput}
                onChange={(e) => setCouponInput(e.target.value)}
                onPressEnter={handleSubmit}
                className="app-input text-start"
              />
              <button
                key={`code-btn-${discount_code}`}
                className="absolute text-primary font-semibold  end-3 top-1/2 transform -translate-y-1/2"
                onClick={handleSubmit}
              >
                {discount_code ? t("buttons.delete"):t("buttons.confirm")} 
              </button>
            </div>
            <div
              onClick={() => setIsModalOpen(true)}
              className="flex cursor-pointer items-center justify-between p-4 mt-3 mb-6 bg-secSuccess border-dashed border border-success rounded-lg"
            >
              <div className="flex items-center gap-2 text-success">
                <GreenDiscountIcon />
                <span className="text-base font-normal">
                  {t("buttons.viewOffers")}
                </span>
              </div>
              <MdKeyboardArrowLeft className="text-success" size={25} />
            </div>
          </>
        )}

        <div className="space-y-5">
          <div className="flex justify-between">
            <span>{t("Text.subtotal", { count: cartLength })}</span>
            <span>{approximateNumber(orderDetails?.subTotal)} {t("Text.IQ")}</span>
          </div>
          {/* {orderDetails?.shipping_cost ? ( */}
            <div className="flex justify-between">
              <span>{t("Text.orderShipping")}</span>
              <span className="text-success">{orderDetails?.shipping_cost? `${approximateNumber(orderDetails?.shipping_cost)} ${t("Text.IQ")}` : t("Text.free")}</span>
            </div>
            {/* ):""} */}
          {orderDetails?.discount_amount > 0 && (
            <div className="flex justify-between">
              <span>{t("Text.orderDiscount")} ({orderDetails?.discount_type == "fixed"?`${orderDetails?.discount} ${t("Text.IQ")}`:`${orderDetails?.discount}%`})</span>
              <span className="text-success">{approximateNumber(orderDetails?.discount_amount)} {t("Text.IQ")}</span>
            </div>
          )}

          {orderDetails?.vat_amount > 0 && (
            <div className="flex justify-between">
              <span>{t("Text.vat")}</span>
              <span className="text-success">{approximateNumber(orderDetails?.vat_amount)} {t("Text.IQ")}</span>
            </div>
          )}

          <div className="h-0.5 bg-greynormal"/>

          <div className="flex justify-between">
            <span>
              <strong>{t("Text.orderTotal")}</strong> {t("Text.orderTax")}
            </span>
            <span>{approximateNumber(orderDetails?.total)} {t("Text.IQ")}</span>
          </div>
        </div>
        {!isCheckout && !isOrder && (
          <LocalePath
            href="/checkout"
            className="app-btn btn-primary py-4 w-full mt-6 group"
          >
            {t("buttons.completeOrder")}
            <WhiteArrowIcon className="group-hover:*:stroke-primary" />
          </LocalePath>
        )}
        {isCheckout && (
          // <Spin spinning={loading}>
            <button
              onClick={createOrder}
              className="app-btn btn-primary py-4 w-full mt-6 group"
            >
              {t("buttons.followPayment")}
              <WhiteArrowIcon className="group-hover:*:stroke-primary" />
            </button>
          // </Spin>
          
        )}
      </div>
      <CouponModal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} />
    </Spin>
  );
};


export default OrderSummary;