/* eslint-disable @typescript-eslint/no-unused-vars */
import ReactDOM from "react-dom";
import {FormEvent, useContext, useEffect, useState} from "react";
import * as authAPI from "../../API/user";
import {useNavigate} from "react-router-dom";
import AuthContext from "../../context/auth-context";
import show from '../../assets/images/eye-show.svg'
import hide from '../../assets/images/eye-hide.svg'
import "./Login.scss";
import Group from "../../assets/images/dua-button-login.svg";
import {toastError} from "../../services/toaster";
import DuaLoader from "../UI/Loader/DuaLoader/DuaLoader";
import FormButtonSubmit from "../UI/Forms/FormButton/FormButtonSubmit";
import useLoading from "../../hooks/useLoading";
import PreLoginSettingsBanner from "./PreLoginSettingsBanner";
import {PreLoginSettings} from "../../models/EgovUser";

const Login = () => {

    const validateInputs = (): boolean => {
        return (
            /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(
                formData.email
            ) && formData.password.length > 5
        );
    };

    const navigate = useNavigate();
    const [formData, setFormData] = useState({
        email: "",
        password: "",
        hasError: false
    });

    const authContext = useContext(AuthContext);
    const [passToggle, setPassToggle] = useState<boolean>(false);
    const [isLoading, setIsLoading] = useLoading(false);

    const [preLoginSettings, setPreLoginSettings] = useState<PreLoginSettings>({});

    const handleSubmit = async (e: FormEvent) => {
        e.preventDefault();
        try {

            setIsLoading(true)
            await authAPI.CSRFToken();
            const login = await authAPI.login({
                email: formData.email,
                password: formData.password
            });

            authContext.loginUser(login.data.user, login.data.translations);
        } catch (error: any) {
            if (error.response.status === 510 || error.response.status === 498 || error.response.status === 499) {
                toastError('Τα στοιχεία που καταχωρήσατε δεν αντιστοιχούν σε ενεργό λογαριασμό. Παρακαλούμε προσπαθήστε ξανά.')
                setFormData({
                    ...formData,
                    hasError: true
                })
            }

        } finally {
            setIsLoading(false)
        }
    };

    const hasDisabledLogin = ('disable_login' in preLoginSettings) && preLoginSettings['disable_login'].status == 1
    const hasPreLoginSettings = Object.values(preLoginSettings).some(set => set.status == 1)

    useEffect(() => {

        (async () => {
            setIsLoading(true)
            try {

                const settings = await authAPI.getPreLoginSettings()

                setPreLoginSettings(settings.data.settings)
                // setPreLoginSettings(Object.values(settings.data.settings).filter(set => set.status === 1))

            } catch (error) {
                setIsLoading(false);
            } finally {
                setIsLoading(false);
            }

        })();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    return (
        <div id="dua-login" className="App">
            {
                isLoading &&
                ReactDOM.createPortal(
                    <div className="dua-loader-portal">
                        <DuaLoader/>
                    </div>,
                    document.body
                )
            }
            <div className="orange-squares">
                <div className="s1"></div>
                <div className="s2"></div>
            </div>


            <div className="main-content">

                {hasPreLoginSettings ?

                    <PreLoginSettingsBanner
                        settings={Object.values(preLoginSettings).filter(set => set.status === 1)}
                    />
                    :
                    <h2>D.U.A. Login</h2>
                }


                <form onSubmit={(e) => handleSubmit(e)} className={formData.hasError ? 'has-error' : ''}>
                    <div className="credentials-wrapper">
                        <div className="row d-flex justify-content-between">
                            <div className="col-12 col-lg-6">

                                <p>
                                    {
                                        hasPreLoginSettings ? ""
                                            :
                                            <>
                                                Παρακαλώ συμπληρώστε το υπηρεσιακό email &
                                                passwords σας.
                                            </>
                                    }


                                </p>

                                <div className="input-wrapper">
                                    <input

                                        disabled={hasDisabledLogin}
                                        placeholder="someone@example.com"
                                        name="email"
                                        type="text"
                                        value={formData.email}
                                        onChange={(e) =>
                                            setFormData({
                                                ...formData,
                                                email: e.target.value,
                                            })
                                        }
                                    />
                                    <label>EMAIL</label>
                                </div>

                                <div className="input-wrapper">
                                    <input
                                        disabled={hasDisabledLogin}
                                        placeholder="password"
                                        name="password"
                                        type={passToggle ? "text" : "password"}
                                        value={formData.password}
                                        onChange={(e) =>
                                            setFormData({
                                                ...formData,
                                                password: e.target.value,
                                            })
                                        }
                                    />
                                    <label>PASSWORD</label>
                                    <div className="pass-reveal">
                                        {passToggle ? (
                                            <img
                                                src={show}
                                                onClick={() =>
                                                    setPassToggle(!passToggle)
                                                }
                                                width='24'
                                            />
                                        ) : (
                                            !passToggle && (
                                                <img
                                                    src={hide}
                                                    onClick={() =>
                                                        setPassToggle(
                                                            !passToggle
                                                        )
                                                    }
                                                    width='24'
                                                />
                                            )
                                        )}
                                    </div>
                                </div>
                                <FormButtonSubmit

                                    buttonType="submit"
                                    disabled={!validateInputs() || isLoading || hasDisabledLogin}
                                    loading={isLoading}
                                >
                                    LOGIN
                                </FormButtonSubmit>
                            </div>

                        </div>
                    </div>
                </form>


            </div>
            <div className="banner">
                <div className="inner">

                </div>
                {/*<img src={Group} alt="ldapreq"/>*/}
            </div>
        </div>
    );
};

export default Login;