import React, { useEffect, useRef, type FormEvent } from 'react'
import './auth.scss'
import { UserRole, UserStatus, type User } from '../../../types/user.type'
import { Apis } from '../../../apis'
import { message, Modal } from 'antd'
import { FormUtil } from '../../../utils/form.util'
import type { UserSignInDTO } from '../../../apis/core/user.api'
import { useSelector } from 'react-redux'
import type { StoreType } from '../../../stores'
export default function Auth() {
    const containerRef = useRef(null)


    async function handleSignup(e: FormEvent) {
        e.preventDefault()

        try {
            let newUser = {
                id: String(Date.now()),
                userName: (e.target as any).userName.value,
                password: (e.target as any).password.value,
                role: UserRole.USER,
                displayName: (e.target as any).displayName.value,
                email: (e.target as any).email.value,
                phoneNumber: (e.target as any).phoneNumber.value,
                status: UserStatus.ACTIVE,
                banReason: ""
            }
            let newUserResult = (await Apis.user.signUp(newUser)) as User
            Modal.confirm({
                title: "Thông báo",
                content: `Bạn đã đăng ký thành công với tên đăng nhập là: ${newUserResult.userName}, id của bạn là: ${newUserResult.id}`,
                onOk: () => {
                    FormUtil.resetForm(e)
                    containerRef.current.classList.remove("right-panel-active");
                }
            })
        } catch (err) {
            message.error(err.mes)
        }
    }

    async function handleSignin(e: FormEvent) {
        e.preventDefault()
        let loginData: UserSignInDTO = {
            emailOrUserName: (e.target as any).emailOrUserName.value,
            password: (e.target as any).password.value
        }
        console.log("loginData", loginData)
        try {
            let data = await Apis.user.signIn(loginData)
            localStorage.setItem("token", data)
            Modal.confirm({
                title: `Chào mừng bạn đã quay trở lại`,
                content: ``,
                onOk: () => {
                    window.location.href = "/"
                },
                onCancel: () => {
                    window.location.href = "/"
                }
            })
        } catch (err) {
            message.error(err.message)
        }
    }

    const userStore = useSelector((store: StoreType) => {
        return store.user
    })

    useEffect(() => {
        if (!userStore.loading && userStore.data) {
            window.location.href = "/"
        }
    }, [userStore.data, userStore.loading])

    return (
        <>
            {
                userStore.data ? <>Đã đăng nhập</> : (
                    <div className='auth_page'>
                        <div ref={containerRef} className="container" id="container">
                            {/* Form Đăng Ký */}
                            <div className="form-container sign-up-container">
                                <form onSubmit={(e) => {
                                    handleSignup(e)
                                }}>
                                    <h1>Tạo tài khoản</h1>
                                    <div className="social-container">
                                        <a href="#" className="social">
                                            <i className="fab fa-facebook-f" />
                                        </a>
                                        <a href="#" className="social">
                                            <i className="fab fa-google-plus-g" />
                                        </a>
                                        <a href="#" className="social">
                                            <i className="fab fa-linkedin-in" />
                                        </a>
                                    </div>
                                    <input type="text" placeholder="userName" name='userName' />
                                    <input type="password" placeholder="Password" name='password' />
                                    <input type="text" placeholder="displayName" name='displayName' />
                                    <input type="email" placeholder="email" name='email' />
                                    <input type="text" placeholder="phoneNumber" name='phoneNumber' />
                                    <button className='cursor-pointer'>Đăng Ký</button>
                                </form>
                            </div>
                            {/* Form Đăng Nhập */}
                            <div className="form-container sign-in-container">
                                <form onSubmit={(e) => {
                                    handleSignin(e)
                                }}>
                                    <h1>Sign in</h1>
                                    <div className="social-container">
                                        <a href="#" className="social">
                                            <i className="fab fa-facebook-f" />
                                        </a>
                                        <a href="#" className="social">
                                            <i className="fab fa-google-plus-g" />
                                        </a>
                                        <a href="#" className="social">
                                            <i className="fab fa-linkedin-in" />
                                        </a>
                                    </div>
                                    <span>or use your account</span>
                                    <input type="text" placeholder="Email or Username" name='emailOrUserName' />
                                    <input type="password" placeholder="Password" name='password' />
                                    <a href="#">Forgot your password?</a>
                                    <button>Sign In</button>
                                </form>
                            </div>
                            {/* Control */}
                            <div className="overlay-container">
                                <div className="overlay">
                                    <div className="overlay-panel overlay-left">
                                        <h1>Welcome Back!</h1>
                                        <p>To keep connected with us please login with your personal info</p>
                                        <button onClick={() => {
                                            containerRef.current.classList.remove("right-panel-active");
                                        }} className="ghost" id="signIn">
                                            Sign In
                                        </button>
                                    </div>
                                    <div className="overlay-panel overlay-right">
                                        <h1>Hello, Friend!</h1>
                                        <p>Enter your personal details and start journey with us</p>
                                        <button onClick={() => {
                                            containerRef.current.classList.add("right-panel-active")
                                        }} className="ghost" id="signUp">
                                            Sign Up
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                )
            }
        </>
    )
}