import React, {useEffect, useState} from "react";
import Popup from "@components/Popup";
import styles from "./styles.module.scss";
import {Controller, useForm} from "react-hook-form";
import classNames from "classnames";
import cpf_card_img from "@assets/pay/cpf_card.png";
import {REQ_STATUS} from "@api/config";
import SmallLoading from "@components/SmallLoading";
import {useDispatch, useSelector} from "react-redux";
import {getSaveCPFStatus} from "@features/paySlice";
import {validateCPF} from "@utils/helpers";
import {toast} from "react-toastify";
import {reqCPFSave} from "@features/api";
const i18n=global.i18n;
const BRCPFSave = ({}) => {
    const [isShow, setIsShow] = useState(false);
    const saveCPFStatus=useSelector(getSaveCPFStatus);
    const dispatch = useDispatch();
    const {register, handleSubmit, formState: {errors}, control} = useForm({
        defaultValues: {
            PixNum:''
        }
    });
    const show=(callback)=>{
        // setChoiceCB(callback);
        global.brCPFSave.saveCB=callback;
        setIsShow(true);
    }
    const hide=()=>{
        setIsShow(false);
    }
    const onCallback=(payload)=>{
        if (payload&&payload.code===200){
            if (global.brCPFSave.saveCB)global.brCPFSave.saveCB();
            hide();
        }
    }
    const onSubmitCPF=(data)=>{
        if (saveCPFStatus===REQ_STATUS.LOADING)return;
        if (!validateCPF(data.PixNum)){
            toast.error(i18n.t("deposit.cpf_save_br.cpf_error"),{toastId:"cpf_error"})
            return;
        }
        // data.callback=onCallback;
        dispatch(reqCPFSave(data)).then((data)=>{
            onCallback(data.payload)
        });
    }
    useEffect(()=>{
        global.brCPFSave={
            show,
            hide
        };
    },[])
    return (
        <Popup onClose={() => {
            hide();
        }} open={isShow}>
            <div className={styles.container}>
                <span className={styles.title}>{i18n.t("deposit.cpf_save_br.modifyInfoTitle")}</span>
                <span className={styles.tips}>{i18n.t("deposit.cpf_save_br.cpfTips")}</span>
                <form autoComplete="off" className={styles.l_form} onSubmit={handleSubmit((data) => {
                    onSubmitCPF(data);
                })}>
                    <Controller control={control}
                                name="PixNum"
                                rules={{required: true}}
                                render={({field: {ref, onChange, value}, fieldState: {error}}) => (
                                    <div className={styles.form_item}>
                                        <div className={styles.cpf_input}>
                                            <div className={styles.title}>
                                                <img src={cpf_card_img}/>
                                                CPF:
                                            </div>
                                            <div
                                                className={classNames("input-control flex-1", {'input-control--error': error})}>
                                                <input
                                                    value={value}
                                                    ref={ref}
                                                    onChange={(e) => {
                                                        onChange(e.target.value);
                                                    }}
                                                    placeholder={i18n.t('deposit.cpf_save_br.cpf')}
                                                />
                                            </div>
                                        </div>
                                    </div>
                                )}
                    />
                    <button className={"button-green"}>
                        {saveCPFStatus===REQ_STATUS.LOADING?(<SmallLoading fill={"#fff"}/>):i18n.t("deposit.cpf_save_br.btn_confirm")}
                    </button>
                </form>
                <span className={styles.tips}>{i18n.t("deposit.cpf_save_br.cpfTips_1")}</span>
            </div>
        </Popup>
    )
}
export default BRCPFSave;