import Spring from "@components/Spring";
import styles from "./styles.module.scss";
import React, {useState} from "react";
import {useSelector} from "react-redux";
import {getUserInfo} from "@features/mainSlice";
import {numFormatter, stringFormat} from "@utils/helpers";
import {getWithdrawBaseInfo} from "@features/paySlice";
import symbol from "@assets/symbol-defs.svg";
import {ReactComponent as Edit} from '@assets/singlesvg/edit.svg';
import {useNavigate} from "react-router-dom";
import {ROUTE_PATH} from "@constants/routes";
const i18n=global.i18n;
const BRWithdraw=()=>{
    const user=useSelector(getUserInfo);
    const info=useSelector(getWithdrawBaseInfo);
    const navigate=useNavigate();
    const addBtnParam = [200, 500, 1000, 2000, 5000, -1];
    const [addIndex,setAddIndex]=useState(-1);
    const [wdValue,setWdValue]=useState("");
    const getShowCash=(value)=>{
        value=Number(value);
        return value/global.CASH_BASE;
    }
    const formatInput=(text)=>{
        let Score=user.Score*global.CASH_BASE;
        let inputNum = Number(text)*global.CASH_BASE;
        inputNum = Math.min(inputNum, info.SumCanExchange);
        inputNum = Math.min(inputNum, Score);
        return (inputNum > 0) ? (getShowCash(inputNum)) : "";
    }
    const getAddIndexFromValue=(value)=>{
        value=Number(value);
        let index=addBtnParam.indexOf(value);
        if (index===-1){
            if (value===info.CanWithDraw){
                index=addBtnParam.length-1;
            }
        }
        return index;
    }
    const renderUser=()=>{
        return (
            <div className={styles.content}>
                <div className={styles.user_con}>
                    <div className={styles.money_con}>
                        <div className={styles.title}>{i18n.t("withdraw.main.total_balance")}</div>
                        <div className={styles.money}>{global.DOLLAR+" "+numFormatter(user.Score)}</div>
                    </div>
                    <div className={styles.money_con}>
                        <div className={styles.title}>{i18n.t("withdraw.main.withdrawable")}</div>
                        <div className={styles.money}>{global.DOLLAR+" "+numFormatter(getShowCash(info.SumCanExchange))}</div>
                    </div>
                </div>
                <div className={styles.line}/>
            </div>
        )
    }
    const renderWithdrawValue=()=>{
        return (
            <div className={styles.content}>
                <div className={styles.title}>{i18n.t("withdraw.main.editBox")}</div>
                <div className={styles.select_con}>
                    {
                        addBtnParam.map((item,index)=>{
                            let label=item===-1?i18n.t("withdraw.main.btn_all"):global.DOLLAR+" "+item;
                            return (
                                <button key={index}
                                        className={`${styles.grid_btn} ${addIndex===index?styles.active:''}`}
                                        onClick={()=>{
                                            let value=item===-1?getShowCash(info.SumCanExchange)+"":item+"";
                                            let fvalue=formatInput(value);
                                            let addIndx=value===fvalue?index:-1;
                                            if (addIndx!==-1)setWdValue(fvalue);
                                            setAddIndex(addIndx);
                                        }}
                                >
                                    {label}
                                </button>
                            )
                        })
                    }
                </div>
                <div className={`input-control ${styles.input_con}`}>
                    <div className={styles.money}>{global.DOLLAR}</div>
                    <input
                        value={wdValue}
                        type={"number"}
                        placeholder={i18n.t("withdraw.main.editPlaceholder")}
                        onChange={(e)=>{
                            let value=formatInput(e.target.value);
                            setWdValue(value);
                            setAddIndex(getAddIndexFromValue(value));
                        }}
                    />
                    {
                        wdValue===""?(<></>):(
                            <button className={styles.clear_btn} onClick={()=>{
                                setWdValue("");
                            }}>
                                <svg className={styles.icon}>
                                    <use xlinkHref={`${symbol}#icon_Close`} />
                                </svg>
                            </button>
                        )
                    }
                </div>
                <div className={styles.line}/>
            </div>
        )
    }
    const renderAccount=()=>{
        let BankUserName=info.BankUserName;
        let AccountsBank=info.AccountsBank;
        let cbPixType=Number(info.PixType);
        let via="";
        let accout="";
        if (BankUserName!==""||AccountsBank!==""){
            via=cbPixType >= 10 ? "TED" : "PIX";
            accout=cbPixType >= 10 ? AccountsBank : BankUserName
        }
        return (
            <div className={`${styles.content} ${styles.account_info}`}>
                <div className={styles.title_con}>
                    <div className={styles.title}>{i18n.t("withdraw.account.title")}</div>
                    <button onClick={()=>{
                        navigate(ROUTE_PATH.ACCOUNT_INFO);
                    }}>
                        <Edit className={styles.icon}/>
                    </button>
                </div>
                <div className={styles.line}></div>
                <div className={styles.info_item}>
                    <div className={styles.title}>{i18n.t("withdraw.main.via")}</div>
                    {
                        via===""?(<div>{i18n.t("withdraw.main.bank_info_isNull")}</div>):(
                            <div className={styles.active}>{via}</div>
                        )
                    }
                    {/*<div className={styles.line}></div>*/}
                </div>
                <div className={styles.info_item}>
                    <div className={styles.title}>{i18n.t("withdraw.main.account")}</div>
                    {
                        accout===""?(<div>{i18n.t("withdraw.main.bank_No_isNull")}</div>):(
                            <div className={styles.active}>{accout}</div>
                        )
                    }
                    {/*<div className={styles.line}></div>*/}
                </div>
            </div>
        )
    }
    const renderSubmit=()=>{
        let num = info.OrderLimit - info.OrderCount;
        // data.WithDrawMin, data.WithDrawMax
        let min=getShowCash(info.MinExchange);
        let max=getShowCash(info.MaxExchange);
        return (
            <div className={styles.content}>
                <button className="button-green">
                    {i18n.t("withdraw.main.btn_withdraw")+"  ("+num+")"}
                </button>
                <div className={styles.tips}>
                    {stringFormat(i18n.t("withdraw.main.tip"),[min,max])}
                </div>
            </div>
        )
    }
    return (
        <>
            {
                info==null?(<></>):(
                    <Spring type="slideUp" className={styles.container}>
                        {renderUser()}
                        {renderWithdrawValue()}
                        {renderAccount()}
                        {renderSubmit()}
                    </Spring>
                )
            }
        </>
    )
}
export default BRWithdraw;