import styles from "./styles.module.scss";
import Spring from "@components/Spring";
import React, {useEffect} from "react";
import {ReactComponent as PixLogo} from "@assets/singlesvg/pix.svg";
import {useDispatch, useSelector} from "react-redux";
import {
    getWDBaseInfoStatus,
    getWDInfoStatus,
    getWDSetInfoStatus,
    getWithdrawBaseInfo,
    getWithdrawInfo
} from "@features/paySlice";
import SmallLoading from "@components/SmallLoading";
import {reqWithdrawBaseInfo, reqWithdrawInfo, reqWithdrawSetInfo} from "@features/api";
import {Controller, useForm} from "react-hook-form";
import PasswordInput from "@components/UInput/PasswordInput";
import classNames from "classnames";
import {APP_GENDER} from "@constants/app";
import {getUserInfo} from "@features/mainSlice";
import {REQ_STATUS} from "@api/config";
const i18n=global.i18n;
const BRAccountEdit=({close})=>{
    const user=useSelector(getUserInfo);
    const baseStatus=useSelector(getWDBaseInfoStatus);
    const setStatus=useSelector(getWDSetInfoStatus);
    const infoStatus=useSelector(getWDInfoStatus);
    let info=useSelector(getWithdrawInfo);
    // if (info==null)info={};
    let dinfo=info==null?{}:info;
    const dispatch=useDispatch();
    const {register, handleSubmit, formState: {errors}, control} = useForm({
        values: {
            account: dinfo.AccountsBank||"",
            userName: dinfo.BankUserName||"",
            bank: dinfo.BankNO||"",
            branceBank: dinfo.BranchBank||"",
            phone: dinfo.PhoneNumber||"",
            PAN: dinfo.PANNumber||"",
            IFSC:dinfo.IFSCNumber||"",
            email: dinfo.EmailAddress||"",
            PixNum: dinfo.PixNum||"",
            adhaar: dinfo.AdhaarNumber||"",
            PixType: dinfo.PixType||"",
        }
    });
    useEffect(()=>{
        dispatch(reqWithdrawInfo({UserID:user.UserID}));
    },[])
    const checkLockStatus=()=>{
        if (baseStatus===REQ_STATUS.LOADING)return true;
        if (setStatus===REQ_STATUS.LOADING)return true;
        return false;
    }
    // const callbackBase=(data)=>{
    //     if (close)close();
    // }
    const callback=(data)=>{
        if (data&&data.code===200){
            // dispatch(reqWithdrawBaseInfo(callbackBase));
            close();
        }
    }
    const handleChange=(data)=>{
        if (checkLockStatus())return;
        data.callback=callback;
        dispatch(reqWithdrawSetInfo(data));
    }
    const renderPixLogo=()=>{
        return (
            <div className={styles.pix_title}>
                <PixLogo className={styles.logo}/>
                {i18n.t("deposit.order_info.pay_type_pix")}
            </div>
        )
    }
    const renderAccoutForm=()=>{
        return (
            <form autoComplete="off" className={styles.accout_form} onSubmit={handleSubmit((data) => {
                handleChange(data);
            })}>
                <Controller control={control}
                            name="userName"
                            rules={{required: true}}
                            render={({field: {ref, onChange, value}, fieldState: {error}}) => (
                                <div className={styles.form_item}>
                                    <div className={styles.title}>{i18n.t("withdraw.account.userName")}</div>
                                    <div className={`input-control ${error?'input-control--error':''}`}>
                                        <input
                                            value={value}
                                            onChange={e => onChange(e.target.value)}
                                            placeholder={i18n.t('withdraw.account.name_holder')}
                                            ref={ref}
                                        />
                                    </div>
                                </div>
                            )}
                />
                <Controller control={control}
                            name="phone"
                            rules={{required: true}}
                            render={({field: {ref, onChange, value}, fieldState: {error}}) => (
                                <div className={styles.form_item}>
                                    <div className={styles.title}>{i18n.t("withdraw.account.phone")}</div>
                                    <div className={`input-control ${error?'input-control--error':''}`}>
                                        <input
                                            value={value}
                                            onChange={e => onChange(e.target.value)}
                                            placeholder={i18n.t('withdraw.account.phone_holder')}
                                            ref={ref}
                                        />
                                    </div>
                                </div>
                            )}
                />
                <Controller control={control}
                            name="email"
                            rules={{required: true}}
                            render={({field: {ref, onChange, value}, fieldState: {error}}) => (
                                <div className={styles.form_item}>
                                    <div className={styles.title}>{i18n.t("withdraw.account.email")}</div>
                                    <div className={`input-control ${error?'input-control--error':''}`}>
                                        <input
                                            value={value}
                                            onChange={e => onChange(e.target.value)}
                                            placeholder={i18n.t('withdraw.account.email_holder')}
                                            ref={ref}
                                        />
                                    </div>
                                </div>
                            )}
                />
                <Controller control={control}
                            name="PixNum"
                            rules={{required: true}}
                            render={({field: {ref, onChange, value}, fieldState: {error}}) => (
                                <div className={styles.form_item}>
                                    <div className={styles.title}>{i18n.t("withdraw.account.cpf")}</div>
                                    <div className={`input-control ${error?'input-control--error':''}`}>
                                        <input
                                            value={value}
                                            onChange={e => onChange(e.target.value)}
                                            placeholder={i18n.t('withdraw.account.cpf_holder')}
                                            ref={ref}
                                        />
                                    </div>
                                </div>
                            )}
                />
                <Controller control={control}
                            name="PixType"
                            rules={{required: true}}
                            render={({field: {ref, onChange, value}, fieldState: {error}}) => (
                                <div className={styles.form_item}>
                                    <div className={styles.title}>{i18n.t("withdraw.account.cpf_dict")}</div>
                                    <div className={styles.pix_con}>
                                        <button type={"button"} className={`${styles.radio_btn} ${value==="1"?styles.active:''}`} onClick={()=>{
                                            onChange("1");
                                        }}>
                                            <div className={styles.circle}>
                                                <div className={styles.dot}/>
                                            </div>
                                            <div>{i18n.t("withdraw.account.cpf")}</div>
                                        </button>
                                        <button type={"button"} className={`${styles.radio_btn} ${value==="2"?styles.active:''}`} onClick={()=>{
                                            onChange("2");
                                        }}>
                                            <div className={styles.circle}>
                                                <div className={styles.dot}/>
                                            </div>
                                            <div>{i18n.t("withdraw.account.e_mail")}</div>
                                        </button>
                                        <button type={"button"} className={`${styles.radio_btn} ${value==="3"?styles.active:''}`} onClick={()=>{
                                            onChange("3");
                                        }}>
                                            <div className={styles.circle}>
                                                <div className={styles.dot}/>
                                            </div>
                                            <div>{i18n.t("withdraw.account.phone_type")}</div>
                                        </button>
                                    </div>
                                </div>
                            )}
                />
                <button className={"button-green"}>
                    {checkLockStatus()?(<SmallLoading fill={"#FFF"}></SmallLoading>):i18n.t("withdraw.account.btn_save")}
                    {/*{i18n.t("withdraw.account.btn_save")}*/}
                </button>
                <div className={styles.tips}>{i18n.t("withdraw.account.help")}</div>
            </form>
        )
    }
    return (
        <>
            {
                infoStatus===REQ_STATUS.LOADING?(
                    <div className={styles.loading}>
                        <SmallLoading/>
                    </div>
                ):(
                    <Spring type="slideUp" className={styles.container}>
                        {renderPixLogo()}
                        {renderAccoutForm()}
                    </Spring>
                )
            }
        </>
    )
}
export default BRAccountEdit;