import styles from './styles.module.scss';
import Spring from "@components/Spring";
import {ReactComponent as PhonePassIcon} from "@assets/singlesvg/mobile-password.svg";
import {ReactComponent as WithdrawPassIcon} from "@assets/singlesvg/store-pass.svg";
import {ReactComponent as EditPhoneIcon} from "@assets/singlesvg/store-phone.svg";
import {ReactComponent as EditEmailIcon} from "@assets/singlesvg/store-email.svg";

import React from "react";
import {useNavigate} from "react-router-dom";
import {ROUTE_PATH} from "@constants/routes";
import {useDispatch, useSelector} from "react-redux";
import {getUserInfo} from "@features/mainSlice";
import {setChangePayPassType} from "@features/paySlice";

const i18n=global.i18n;
const WSecurity = ({ close }) => {
    const navigate = useNavigate();
    const user=useSelector(getUserInfo);
    const dispatch = useDispatch();
    const isShowPWD=user != null && user.Phone != null && user.Phone !== "";
    const renderPhone=()=>{
        return (
            isShowPWD? (
                <div className={styles.item}>
                    <div className={styles.item_title_con}>
                        <EditPhoneIcon className={styles.icon}></EditPhoneIcon>
                        <div className={styles.title}>{i18n.t("security.phone_title")}</div>
                    </div>
                    <div>{i18n.t("security.phone_des")}</div>
                    <button className={`button-green ${styles.button}`} onClick={() => {
                        navigate(ROUTE_PATH.EDIT_PHONE)
                    }}>{i18n.t("security.phone_title")}</button>
                </div>
            ):(<></>)
        )
    }
    const renderEmail=()=>{
        return (
            isShowPWD? (
                <div className={styles.item}>
                    <div className={styles.item_title_con}>
                        <EditEmailIcon className={styles.icon}></EditEmailIcon>
                        <div className={styles.title}>{i18n.t("security.email_title")}</div>
                    </div>
                    <div>{i18n.t("security.email_des")}</div>
                    <button className={`button-green ${styles.button}`} onClick={() => {
                        navigate(ROUTE_PATH.EDIT_EMAIL)
                    }}>{i18n.t("security.email_title")}</button>
                </div>
            ):(<></>)
        )
    }
    return (
        <div className={styles.container}>
            <Spring className={styles.content} type={"slideUp"}>
                <div className={`${styles.title_con} ${styles.title_y}`}>
                    {i18n.t("security.title")}
                </div>
                <div className={styles.line}></div>
                {
                    isShowPWD? (
                        <div className={styles.item}>
                            <div className={styles.item_title_con}>
                                <PhonePassIcon className={styles.icon}></PhonePassIcon>
                                <div className={styles.title}>{i18n.t("security.login_pass_title")}</div>
                            </div>
                            <div>{i18n.t("security.login_pass_des")}</div>
                            <button className={`button-green ${styles.button}`} onClick={() => {
                                navigate(ROUTE_PATH.EDIT_PWD)
                            }}>{i18n.t("security.login_pass_title")}</button>
                        </div>
                    ):(<></>)
                }
                <div className={styles.item}>
                    <div className={styles.item_title_con}>
                        <WithdrawPassIcon className={styles.icon}></WithdrawPassIcon>
                        <div className={styles.title}>{i18n.t("security.withdraw_pass_title")}</div>
                    </div>
                    <div>{i18n.t("security.withdraw_pass_des")}</div>
                    <button className={`button-green ${styles.button}`} onClick={() => {
                        let InsurePass = Number(user.InsurePass);
                        let type = InsurePass;
                        dispatch(setChangePayPassType(InsurePass));
                        navigate(ROUTE_PATH.CHANGE_PAY_PASS)
                    }}>{i18n.t("security.withdraw_pass_title")}</button>
                </div>
                {renderPhone()}
                {renderEmail()}
            </Spring>
        </div>
    )
}
export default WSecurity;