import { actionLogin } from "../../actions/actionLogin";

import { useState, useEffect, useContext } from "react";
import { connect, useSelector } from "react-redux";
import { MdVisibility, MdVisibilityOff } from "react-icons/md";
import { Box, Button, IconButton, TextField } from "@mui/material";
import { useFormik } from "formik";
import * as Yup from "yup";
import { UIContext } from "../UIContext";
import { useNavigate } from "react-router-dom";

const signInSchema = Yup.object().shape({
    username: Yup.string().required("Обов'язкове"),
    password: Yup.string().required("Обов'язкове"),
});

export const AuthForm = ({ onSubmit = null, promiseStatus, promisePayload, serverErrors = [] } = {}) => {
    const [showPassword, setShowPassword] = useState(false);
    const { setAlert } = useContext(UIContext);
    const navigate = useNavigate();
    const isAdmin = useSelector((state) => state.auth?.payload?.sub?.acl || []).includes("admin");

    if (isAdmin) {
        navigate("/admin");
    }

    const formik = useFormik({
        initialValues: {
            username: "",
            password: "",
        },
        validationSchema: signInSchema,
        validateOnChange: true,
        onSubmit: () => {
            onSubmit(formik.values.username, formik.values.password);
        },
    });

    useEffect(() => {
        if (promiseStatus === "FULFILLED") {
            formik.setSubmitting(false);
            if (promisePayload) {
                setAlert({
                    show: true,
                    severity: "success",
                    message: "Готово",
                });
            } else {
                setAlert({
                    show: true,
                    severity: "error",
                    message: "Не вірні дані",
                });
            }
        }
        if (promiseStatus === "REJECTED") {
            const errorMessage = serverErrors.reduce((prev, curr) => prev + "\n" + curr.message, "");
            formik.setSubmitting(false);
            setAlert({
                show: true,
                severity: "error",
                message: errorMessage,
            });
        }
    }, [promiseStatus]);

    return (
        <Box
            className="AuthForm"
            display="flex"
            flexDirection="column"
            onSubmit={formik.handleSubmit}
            justifyContent="center"
            component="form"
        >
            <TextField
                id="username"
                name="username"
                variant="outlined"
                label="Username"
                error={formik.touched.username && Boolean(formik.errors.username)}
                value={formik.values.username}
                onBlur={formik.handleBlur}
                onChange={formik.handleChange}
                helperText={formik.touched.username && formik.errors.username}
                fullWidth
                sx={{ mt: 2 }}
            />

            <TextField
                id="password"
                name="password"
                variant="outlined"
                label="Password"
                type={showPassword ? "text" : "password"}
                error={formik.touched.password && Boolean(formik.errors.password)}
                value={formik.values.password}
                onBlur={formik.handleBlur}
                onChange={formik.handleChange}
                helperText={formik.touched.password && formik.errors.password}
                InputProps={{
                    endAdornment: (
                        <IconButton onClick={() => setShowPassword((prev) => !prev)} edge="end">
                            {showPassword ? <MdVisibilityOff /> : <MdVisibility />}
                        </IconButton>
                    ),
                }}
                fullWidth
                sx={{ mt: 2 }}
            />
            <Button
                variant="contained"
                color="primary"
                type="submit"
                disabled={formik.isSubmitting || !formik.isValid}
                sx={{ mt: 2, mr: 1 }}
                fullWidth
            >
                Увійти
            </Button>
        </Box>
    );
};

export const CAuthForm = connect(
    (state) => ({
        promiseStatus: state.promise?.login?.status || null,
        promisePayload: state.promise?.login?.payload || null,
        serverErrors: state.promise?.login?.error || [],
    }),
    {
        onSubmit: (login, password) => actionLogin(login, password),
    }
)(AuthForm);