import styles from './styles.module.scss';
import Spring from "@components/Spring";
import React from "react";
import logo_dark from "@assets/logo/logo.png";
import logo_light from "@assets/logo/logo_w.png";
import {useThemeProvider} from "@contexts/themeContext";
import {Controller, useForm} from "react-hook-form";
import PasswordInput from "@components/UInput/PasswordInput";
import classNames from "classnames";
import {REQ_STATUS} from "@api/config";
import {useDispatch, useSelector} from "react-redux";
import {getChangePassStatus} from "@features/mainSlice";
import SmallLoading from "@components/SmallLoading";
import {reqChangePass} from "@features/api";
import {APP_THEME} from "@constants/app";
const i18n=global.i18n;

const WEditPassword=({close})=>{
    const status=useSelector(getChangePassStatus);
    const dispatch = useDispatch();
    const {theme,isMobile} = useThemeProvider();
    const logourl=(theme===APP_THEME.DARK?logo_dark:logo_light);
    const {register, handleSubmit, formState: {errors}, control} = useForm({
        defaultValues: {
            oldpassword: '',
            newpassword: '',
            renewpassword:''
        }
    });
    const renderLogo=()=>{
        return (
            <div className={styles.logo}>
                <img className={styles.logo_img} src={logourl}/>
            </div>
        )
    }
    const onCallback=(code)=>{
        if (code==200){
            if (close)close();
        }
    }
    const handleChange=(data)=>{
        if (status===REQ_STATUS.LOADING)return;
        data.callback=onCallback;
        dispatch(reqChangePass(data));
    }
    const renderForm=()=>{
        return (
            <div className={styles.form_con}>
                <div className={styles.form_title}>{i18n.t("user.password.title")}</div>
                <form autoComplete="off" className={styles.form_content} onSubmit={handleSubmit((data) => {
                    handleChange(data);
                })}>
                    <Controller control={control}
                                name="oldpassword"
                                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('user.password.oldpassword')}
                                        innerRef={ref}/>
                                )}
                    />
                    <Controller control={control}
                                name="newpassword"
                                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('user.password.newpassword')}
                                        innerRef={ref}/>
                                )}
                    />
                    <Controller control={control}
                                name="renewpassword"
                                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('user.password.renewpassword')}
                                        innerRef={ref}/>
                                )}
                    />
                    <button className={"button-green"}>
                        {
                            status===REQ_STATUS.LOADING?(<SmallLoading fill={"#fff"}/>):i18n.t("user.submit_btn")
                        }
                    </button>
                </form>
            </div>
        )
    }
    return (
        <div className={styles.container}>
            <Spring type="slideUp" className={styles.content}>
                {renderLogo()}
                {renderForm()}
            </Spring>
        </div>
    )
}
export default WEditPassword;
