import {useEffect, useState} from "react";
import styles from "./styles.module.scss";
import Popup from "@components/Popup";
import ru1 from "@assets/pay/ru/ru1.png";
import ru2 from "@assets/pay/ru/ru2.png";
import RadioBtn from "@components/RadioBtn";
import {ReactComponent as RightArrow} from "@assets/singlesvg/right-arrow.svg";

const i18n=global.i18n;

const RUPaytypeSelect = ({})=>{
    const [isShow, setIsShow] = useState(false);
    // const [choiceCB, setChoiceCB] = useState(null);
    const [eventType, setEventType] = useState("p2p");
    const tdata=[
        {
            type:"sbp",
            title:"deposit.paytype_select_ru.type_1",
            img:ru1
        },
        {
            type:"p2p",
            title:"deposit.paytype_select_ru.type_2",
            img:ru2
        }
    ]
    const show=(callback)=>{
        // setChoiceCB(callback);
        global.ruPaytypeSelect.choiceCB=callback;
        setIsShow(true);
    }
    const hide=()=>{
        setIsShow(false);
    }
    const onConfirm=()=>{
        if (eventType==null||eventType==="")return;
        if (global.ruPaytypeSelect.choiceCB!=null){
            global.ruPaytypeSelect.choiceCB(eventType);
        }
        hide();
    }
    useEffect(()=>{
        const ruPaytypeSelect={
            show,
            hide
        };
        global.ruPaytypeSelect=ruPaytypeSelect;
    },[])
    return (
        <Popup onClose={()=>{
            hide();
        }} open={isShow}>
            <div className={styles.container}>
                <span className={styles.title}>{i18n.t("deposit.paytype_select_ru.title")}</span>
                <div className={styles.content}>
                    {
                        tdata.map((item,index)=>{
                            return (
                                <button key={index} className={styles.item_con} onClick={()=>{
                                    setEventType(item.type);
                                }}>
                                    <RadioBtn className={styles.item_radio} selected={item.type===eventType} value={item.type} onChange={(value)=>{
                                        setEventType(value);
                                    }} />
                                    <div className={styles.item}>
                                        <span>{i18n.t(item.title)}</span>
                                        <img src={item.img}/>
                                    </div>
                                </button>
                            )
                        })
                    }
                </div>
                <div className={styles.btn_con}>
                    <button className={`button-green ${styles.btn}`} onClick={onConfirm}>
                        {i18n.t("deposit.paytype_select_ru.btn_confirm")}
                        <RightArrow className={styles.icon}></RightArrow>
                    </button>
                </div>
            </div>
        </Popup>
    )
}
export default RUPaytypeSelect;