import React, {useEffect, useState} from "react";
import Popup from "@components/Popup";
import styles from "./styles.module.scss";
import usdimg from "@assets/lvicon/USD.black.png";
import {Controller, useForm} from "react-hook-form";
import PhoneInput from "@components/UInput/PhoneInput";
import classNames from "classnames";
import PasswordInput from "@components/UInput/PasswordInput";
import {validateCountryPhone} from "@utils/helpers";
import {REQ_STATUS} from "@api/config";
const i18n=global.i18n;
const WBindPhone=({})=>{
    const [isShow, setIsShow] = useState(false);
    const regCoins=5;
    const [country, setCountry] = useState("55");
    const {register, handleSubmit, formState: {errors}, control} = useForm({
        defaultValues: {
            phone: '',
            password: '',
            repassword:'',
            code:''
        }
    });
    // /bindsms    {phone,code,password,repassword}
    const show=()=>{
        setIsShow(true);
    }
    const hide=()=>{
        setIsShow(false);
    }
    const validatePhone=(value)=>{
        return validateCountryPhone(country,value);
    }
    const onSubmitBind=(data)=>{

    }
    useEffect(()=>{
        const bindPhone={
            show,
            hide
        };
        global.bindPhone=bindPhone;
    },[])
    return (
       <Popup onClose={hide} open={isShow}>
           <div className={styles.container}>
                <span className={styles.title}>
                    {i18n.t("bindPhone.title_link_phone")}
                </span>
               <div className={styles.award_con}>
                   {i18n.t("bindPhone.phone_award")}
                   <img src={usdimg}/>
                   {regCoins}
               </div>
               <form autoComplete="off" className={styles.l_form} onSubmit={handleSubmit((data) => {
                   onSubmitBind(data);
               })}>
                   <Controller control={control}
                               name="phone"
                               rules={{required: true, validate: validatePhone}}
                               render={({field: {ref, onChange, value}, fieldState: {error}}) => {
                                   let message = error ? i18n.t("form_errors.phone_" + country) : "";
                                   return (<PhoneInput
                                       className={classNames({'input-control--error': error})}
                                       value={value}
                                       message={message}
                                       onChange={e => onChange(e.target.value)}
                                       onChangeCountry={(country) => {
                                           setCountry(country);
                                       }}
                                       placeholder={i18n.t('login.phone_ph')}
                                       innerRef={ref}/>)
                               }}
                   />
                   <Controller control={control}
                               name="password"
                               rules={{required: true, minLength: 6}}
                               render={({field: {ref, onChange, value}, fieldState: {error}}) => (
                                   <PasswordInput
                                       className={classNames({'input-control--error': error})}
                                       value={value}
                                       message={error ? i18n.t("form_errors.pass") : ''}
                                       onChange={e => onChange(e.target.value)}
                                       placeholder={i18n.t('login.login_pwd')}
                                       innerRef={ref}/>
                               )}
                   />
                   <Controller control={control}
                               name="repassword"
                               rules={{required: true, minLength: 6}}
                               render={({field: {ref, onChange, value}, fieldState: {error}}) => (
                                   <PasswordInput
                                       className={classNames({'input-control--error': error})}
                                       value={value}
                                       message={error ? i18n.t("form_errors.pass") : ''}
                                       onChange={e => onChange(e.target.value)}
                                       placeholder={i18n.t('login.re_pwd')}
                                       innerRef={ref}/>
                               )}
                   />
                   <Controller control={control}
                               name="code"
                               rules={{required: true}}
                               render={({field: {ref, onChange, value}, fieldState: {error}}) => {
                                   return (
                                       <div className={`d-flex flex-column g-6`}>
                                           <div
                                               className={`input-control ${classNames({'input-control--error': error})}`}>
                                               <input
                                                   type={'text'}
                                                   autoComplete="off"
                                                   ref={ref}
                                                   onChange={e => onChange(e.target.value)}
                                                   placeholder={i18n.t('login.otp_ph')}
                                               />
                                               <button type={"button"} className={styles.otp_btn}>OTP</button>
                                           </div>
                                       </div>
                                   )
                               }}
                   />
                   <button className={"button-green"}>
                       {
                           i18n.t("bindPhone.btn_submit")
                       }
                   </button>
                   <span className={styles.tips}>{i18n.t("bindPhone.tips")}</span>
               </form>
           </div>
       </Popup>
    )
}
export default WBindPhone;