"use client";

import { addCouponRequest } from "@/app/api-requests/addCouponRequest";
import { useCartStore } from "@/app/store/cartStore";
import TranslateClient from "@/components/ui/localization/TranslateClient";
import MainButton from "@/components/ui/MainButton";
import { toast } from "@/components/ui/use-toast";
import useCurrentLanguage from "@/hooks/useCurrentLanguage";
import { useState } from "react";

const CouponActivation = () => {
  const { locale } = useCurrentLanguage();
  const { getPriceSummary, priceSummary } = useCartStore();
  const [couponValue, setCouponValue] = useState(priceSummary?.Name_coupon);


  async function addCodeHandler() {
    if (!couponValue) return;
    const res = await addCouponRequest(couponValue);
    if (!!res?.errors) {
      return;
    }
    toast({
      title: "success",
      description: "coupon applied successfully",
      className: "bg-green-700 text-white rounded-xl",
    });
    setCouponValue("");
    getPriceSummary();
  }
  return (
    <div className="pb-3 mb-3 border-b-2 border-gray-200">
      <h3 className="mb-2">
        <TranslateClient text="add_discount_coupon" />
      </h3>
      <div className="relative">
        <input
          value={couponValue}
          onChange={(e) => setCouponValue(e.target.value)}
          type="text"
          placeholder={locale?.["enter_coupon"]}
          className="w-full p-2 rounded-xl bg-gray-100 border border-gray-200 outline-none"
          onKeyDown={(e) => e.key === "Enter" && addCodeHandler()}
        />
        <MainButton
          onClick={addCodeHandler}
          className="absolute top-1/2 -translate-y-1/2 rtl:left-1 ltr:right-1 px-5"
          size={"xs"}
        >
          <TranslateClient text="activation" />
        </MainButton>
      </div>
    </div>
  );
};

export default CouponActivation;