"use client";
import { DepositsTypes } from "@/api/depositsApi";
import { getUserRechargeApi } from "@/api/user";
import actions from "@/app/[locale]/(TabBar)/(ordinary)/deposit/actions";
import ButtonOwn from "@/components/ButtonOwn";
import { Toast } from "antd-mobile";
import { useTranslations } from "next-intl";
import { FC, Fragment, useState } from "react";
import "./page.scss";

interface Props {
    deposits: DepositsTypes[];
}

const DepositData: FC<Props> = (props) => {
    const { deposits } = props;
    const t = useTranslations("DepositPage");

    const [activeType, setActiveType] = useState<DepositsTypes>(deposits[0]);

    let [amount, setAmount] = useState("");
    const ChangeAmount = (e: any) => {
        let newAmount = e.target.value.replace(/[^0-9]/g, "");
        if (newAmount > activeType.max_amount) newAmount = activeType.max_amount;
        // if (newAmount < activeType.min_amount) newAmount = activeType.min_amount;
        setAmount(newAmount);
    };

    const userRechargeRequest = async () => {
        if (+amount < activeType.min_amount) {
            Toast.show(`Min  ${activeType.min_amount}`);
            return;
        }
        let res = await getUserRechargeApi({
            amount: parseInt(amount),
            channel_id: activeType.id,
        });
        if (res.code === 200) {
            setAmount("");
            Toast.show({ icon: "success", content: t("RechargeSuc"), maskClickable: false });
            await actions();
        }
    };
    const titleChangeHandler = (item: DepositsTypes, index: number) => {
        setAmount("");
        setActiveType(item);
    };

    return (
        <div className="deposit-box">
            <div className="img-box"></div>

            <div className={"flex flex-wrap"}>
                {deposits.map((item, index) => {
                    return (
                        <Fragment key={item.id}>
                            <p
                                className="btn-box truncate"
                                style={{
                                    borderColor: activeType.id === item.id ? "#ff9323" : "#333",
                                }}
                                onClick={() => titleChangeHandler(item, index)}
                            >
                                {item.name}
                            </p>
                        </Fragment>
                    );
                })}
            </div>

            <div className={"flex flex-col"}>
                <div className={"flex-1"}>
                    <div className="amount-box">
                        <span>{t("Montante")} (BRL):</span>
                        <input
                            type="text"
                            value={amount}
                            onChange={ChangeAmount}
                            placeholder={`Mín. ${activeType.min_amount}`}
                        />
                    </div>
                    <ul className="ul-box">
                        {activeType.products.map((item, index) => (
                            <li
                                className={+amount == item.amount ? "active" : ""}
                                key={index}
                                onClick={() => setAmount(`${item.amount}`)}
                            >
                                {!!item.badge && <span className="hot"></span>}
                                <div className="amountContent">
                                    {/* <span className="iconfont icon-unit-brl"></span> */}
                                    <span className="iconfont">R$</span>
                                    <span> {item.amount}</span>
                                </div>
                                <span className="amountTips">{t("Oferecer")} 100%</span>
                            </li>
                        ))}
                    </ul>
                </div>
            </div>

            <div className="topUp">
                <ButtonOwn active={amount !== ""} callbackFun={userRechargeRequest}>
                    {t("DepositarAgora")}
                </ButtonOwn>
                <div className={"mt-[5px] text-[0.12rem] text-primary-color"}>
                    {t("depositTips")}
                </div>
            </div>
        </div>
    );
};

export default DepositData;
