import styles from './styles.module.scss'
import Popup from "@components/Popup";
import iconMark from "@assets/icon_mark.webp";
import { useDispatch, useSelector } from 'react-redux';
import { changeOldAccount, getOldUserInfo } from '@features/mainSlice';

const OldAccountTips = ({ onClose }) => {
    const oldUser = useSelector(getOldUserInfo);
    const dispatch = useDispatch();

    const handleLogin = () => {
        dispatch(changeOldAccount());
    }

    const handleCancel = () => {
        onClose && onClose(0);
    }

    return (
        <Popup open={true} onClose={() => { }} popupClass="popup-overflow" btnCloseType={0} >
            <div className={styles.tipsNode}>
                <div className={styles.titleImg}>
                    <span>
                        <span>
                            <img src={iconMark}></img>
                        </span>
                    </span>
                </div>

                <div className={styles.title}>
                    WARNING
                    <span>Phone Number Conflict</span>
                </div>
                <div className={styles.desc}>
                    The phone number <span className={styles.green}>{oldUser.Phone}</span> is already
                    linked to another account<br />
                    Linked Account ID:<span className={styles.yellow}>{oldUser.GameID}</span>
                </div>

                <button className={styles.btnConfirm} onClick={handleLogin}>
                    Log in to Original Account
                    <span>ID:{oldUser.GameID}</span>
                </button>

                <button className={styles.btnCancel} onClick={handleCancel}>
                    Cancel
                </button>
            </div>
        </Popup>
    )
}

export default OldAccountTips;