"use client";

import Button from "@/components/button/PrimaryButton";
import InputField from "@/components/input/InputField";
import { ef, ue } from "@/lib/helpers/utfNumbers";
import { glassSurfaceCard } from "@/lib/styles/glassSurface";
import { ArrowLeft, ArrowRight, WalletMinus } from "iconsax-react";
import { useRouter } from "next/navigation";
import React, { useState } from "react";

type Props = object;

function UserWalletIndex({}: Props) {
  const router = useRouter();
  const [chargeValue, setChargeValue] = useState<string>("0");
  const chargeAction = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const data = new FormData(e.currentTarget);
    const value = Number(ue(String(data.get("chargeValue") ?? 0))) + 0;
    console.log("Charge for: ", value);
  };

  return (
    <div className="overflow-y-auto h-full noscrollbar flex flex-col">
      <div className="grid grid-cols-3 items-center">
        <span></span>
        <h1 className="text-sm2 place-self-center font-medium">پروفایل کاربری</h1>
        <ArrowLeft
          className="cursor-pointer place-self-end"
          size="24"
          color="currentColor"
          onClick={() => {
            router.back();
          }}
        />
      </div>

      <form onSubmit={chargeAction} className={glassSurfaceCard("mt-8 flex-1 h-full w-full py-6 px-4 flex flex-col justify-between")}>
        <div className="">
          <div className="flex items-center justify-center text-center gap-4 pb-6 border-b-[1.5px] border-border">
            <div className="block">
              <div className="font-medium text-sm flex items-center gap-2">
                <WalletMinus className="size-5 stroke-foreground mb-0.5" />
                موجودی کیف پول
              </div>
              <div className="text-sm text-primary mt-3 inline-flex dark:text-neutral-200 items-center gap-2">{ef("250.000 تومان")}</div>
            </div>
          </div>

          <div className="grid gap-3 mt-6">
            <div className="inline-flex items-center mb-3 gap-2.5 text-sm2">برای شارژ کیف پول خود میتوانید بر روی یکی از مبالغ زیر کلیک کنید و یا مبلغ دلخواه خود را وارد کنید</div>
            <Button type="button" onClick={() => setChargeValue("50000")} className="bg-disabled! text-sm2 text-foreground! flex justify-between items-center">
              <ArrowRight className="stroke-foreground size-5" />
              <span className="mt-0.5">{ef("50,000 تومان")}</span>
            </Button>
            <Button type="button" onClick={() => setChargeValue("150000")} className="bg-disabled! text-sm2 text-foreground! flex justify-between items-center">
              <ArrowRight className="stroke-foreground size-5" />
              <span className="mt-0.5">{ef("150,000 تومان")}</span>
            </Button>
            <Button type="button" onClick={() => setChargeValue("300000")} className="bg-disabled! text-sm2 text-foreground! flex justify-between items-center">
              <ArrowRight className="stroke-foreground size-5" />
              <span className="mt-0.5">{ef("300,000 تومان")}</span>
            </Button>
            <InputField
              className="bg-container mt-7"
              labelText="مبلغ دلخواه (تومان)"
              dir="ltr"
              inputMode="decimal"
              htmlFor="chargeValue"
              placeholder=""
              value={ef(chargeValue)}
              onChange={(e) => setChargeValue(e.target.value)}
            />
          </div>
        </div>

        <div className="w-full text-center mt-6">
          <Button type="submit">شارژ کیف پول</Button>
        </div>
      </form>
    </div>
  );
}

export default UserWalletIndex;