import Link from "next/link";
import { useEffect, useState } from "react";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import { connect } from "react-redux";
import { Field, reduxForm } from "redux-form";
import LoadingOverlay from "react-loading-overlay";
import { getLogin } from "../../actions";
import { setLoggedInUserId } from "../../store/accountDetails/action";
import { parseCookies, setCookie, destroyCookie } from "nookies";

import { useSession, signIn, signOut } from "next-auth/react";

const required = (errorMsg) => (value) =>
    value || typeof value === "number" ? undefined : errorMsg;

export const minLength = (errorMsg) => (value) =>
    value && value.length < 4
        ? errorMsg //`Must be ${min} characters or more`
        : undefined;

const RenderTextfield = ({
    id,
    className,
    rows,
    datafieldname,
    name,
    label,
    input,
    hint1,
    hint2,
    meta: { touched, error },
    ...custom
}) => {
    return (
        <>
            <div
                className={
                    touched && error
                        ? "govuk-form-group govuk-form-group--error"
                        : "govuk-form-group "
                }
            >
                <div id="basicSearch-hint" className="govuk-hint ">
                    <span className="govuk-body-m">{hint1}</span>

                    <br />
                    <span className="govuk-body-s">{hint2}</span>
                </div>
                <label className="govuk-label " htmlFor={id} id={id + "_label"}>
                    {label}
                </label>
                {touched && error && (
                    <span id={id + "-error"} className="govuk-error-message">
                        <span className="govuk-visually-hidden">Error:</span>{" "}
                        {error}
                    </span>
                )}
                <input
                    {...input}
                    className={className}
                    name={name}
                    id={id}
                    autoComplete="username"
                />
            </div>
        </>
    );
};
const RenderPasswordfield = ({
    id,
    className,
    rows,
    datafieldname,
    name,
    label,
    input,
    hint1,
    hint2,
    meta: { touched, error },
    ...custom
}) => {
    return (
        <>
            <div
                className={
                    touched && error
                        ? "govuk-form-group govuk-form-group--error"
                        : "govuk-form-group "
                }
            >
                <label className="govuk-label " htmlFor={id} id={id + "_label"}>
                    {label}
                </label>
                <div id="basicSearch-hint" className="govuk-hint ">
                    <span className="govuk-body-m">{hint1}</span>
                </div>

                {touched && error && (
                    <span id={id + "-error"} className="govuk-error-message">
                        <span className="govuk-visually-hidden">Error:</span>{" "}
                        {error}
                    </span>
                )}
                <input
                    {...input}
                    type="password"
                    className={className}
                    name={name}
                    id={id}
                    autoComplete="current-password"
                />
            </div>
        </>
    );
};

let Login = (props) => {
    let { t } = useTranslation();
    const {
        handleSubmit,
        pristine,
        reset,
        submitting,
        setLoggedInUserId,
        GG_CLIENT_ID,
        GG_REDIRECT_URI,
    } = props;

    const { data: session } = useSession();

    const router = useRouter();
    const { locale } = router;

    // const [showSpinnerState, setShowSpinnerState] = useState(false);
    const [validLoginID, setValidLoginID] = useState(null);

    // console.log(
    //     "built login url path:",
    //     props.govGateway.config.authorization_endpoint +
    //         "?response_type=code&scope=openid&client_id=" +
    //         GG_CLIENT_ID +
    //         "&redirect_uri=" +
    //         GG_REDIRECT_URI +
    //         "&ui_locales=" +
    //         (router.locale == "cy" ? "cy" : "en-GB")
    // );

    // let spinnerState = () => {
    //     showSpinnerState == true
    //         ? setShowSpinnerState(false)
    //         : setShowSpinnerState(true);
    // };

    const onHandleSubmit = (values) => {
        //spinnerState();

        let now = new Date();
        let expDate = new Date(now);

        expDate.setDate(now.getDate() + 1);

        getLogin(values.loginUserID, values.loginUserPassword).then((data) => {
            data.value.length != 0
                ? (setValidLoginID(true),
                  setLoggedInUserId(data.value[0].contactid),
                  setCookie(null, "pinsUser", data.value[0].contactid, {
                      path: "/",
                      expires: expDate,
                  }),
                  //   spinnerState(),
                  router.replace({
                      pathname:
                          router.locale == "cy" ? "/fymhorth" : "/myportal",
                  }))
                : //setShowSpinnerState(false),
                  setValidLoginID(false);
        });
    };

    const cookies = parseCookies();

    useEffect(() => {
        cookies.pinsUser != null || typeof cookies.pinsUser != "undefined"
            ? // spinnerState(),
              router.replace("/myportal", null, {
                  shallow: true,
              })
            : "";
    }, [cookies.pinsUser, router]);

    const govGatwayLoginRedirect = () => {
        let ggUrl =
            props.govGateway.config.authorization_endpoint +
            "?response_type=code&scope=openid&client_id=" +
            GG_CLIENT_ID +
            "&redirect_uri=" +
            GG_REDIRECT_URI +
            "&ui_locales=" +
            (router.locale == "cy" ? "cy" : "en-GB");

        console.log("login Url:", ggUrl);

        router.replace(ggUrl);
    };

    const govGatwayForgottenLink = () => {
        let ggUrl =
            props.govGateway.config.authorization_endpoint +
            "/login/forgot-password";
        router.replace(ggUrl);
    };

    if (session === "loading") {
        return <h1>loading...</h1>;
    }

    if (session) {
        <>
            <div>Signed in as {session.user?.email}</div>
            <br />
            <button type="button" onClick={() => signOut()}>
                Signout
            </button>
        </>;
    }
    return (
        <>
            <div className="card" id="login-card">
                <div className="card-body active">
                    <h3 className="heading-small card-heading">
                        {t("home:login-card-title")}
                    </h3>{" "}
                    <div className="govuk-form-group govuk-!-margin-top-4">
                        <div className="govuk-body">
                            {session && "Signed in as " + session.user?.email}
                        </div>
                        <br />
                        {!session && (
                            <button
                                className="govuk-button withChevron govuk-button-cta"
                                type="button"
                                onClick={() => signIn("email")}
                            >
                                Sign in with email address
                            </button>
                        )}
                        {session && (
                            <button
                                className="govuk-button"
                                type="button"
                                onClick={() => signOut()}
                            >
                                Magic Link Sign Out
                            </button>
                        )}
                    </div>
                    <form onSubmit={handleSubmit(onHandleSubmit)}>
                        {validLoginID == false && (
                            <div className="govuk-error-message govuk-form-group--error">
                                Incorrect username or password
                            </div>
                        )}
                        <Field
                            // validate={[
                            //     required(
                            //         t("home:casesearch-search-validation-required")
                            //     ),
                            //     minLength(
                            //         t("home:casesearch-search-validation-minlength")
                            //     ),
                            // ]}
                            className="govuk-input"
                            component={RenderTextfield}
                            id="loginUserID"
                            name="loginUserID"
                            type="text"
                            aria-describedby="basicSearch-hint"
                            hint1={t("home:login-card-id-label")}
                            label={t("home:login-card-id-hint")}
                        />

                        <Field
                            // validate={[
                            //     required(
                            //         t("home:casesearch-search-validation-required")
                            //     ),
                            //     minLength(
                            //         t("home:casesearch-search-validation-minlength")
                            //     ),
                            // ]}
                            className="govuk-input"
                            component={RenderPasswordfield}
                            id="loginUserPassword"
                            name="loginUserPassword"
                            type="password"
                            label="Password"
                        />

                        <div className="govuk-form-group">
                            <button type="submit" className="govuk-button">
                                {t("home:login-card-button")}
                            </button>
                        </div>
                    </form>
                    {/*  <div className="govuk-form-group govuk-!-margin-top-4">
                        <p className="govuk-body-xs">
                            <a
                                onClick={() => {
                                    govGatwayLoginRedirect();
                                }}
                                className="govuk-button withChevron govuk-button-cta"
                            >
                                {t("home:login-via-gov-gateway-label")}
                            </a>
                        </p>
                        <p className="govuk-body-s">
                            {t("home:login-card-register-label")}{" "}
                            <a
                                href={
                                    router.locale == "cy"
                                        ? "https://www.ete.access.service.gov.uk/login/create-account?lang=cy"
                                        : "https://www.ete.access.service.gov.uk/login/create-account"
                                }
                                className="govuk-link--no-underline"
                            >
                                {t("home:login-card-register-link")}
                            </a>
                        </p>
                        <p className="govuk-body-s">
                            <a
                                onClick={() => {
                                    govGatwayForgottenLink();
                                }}
                                className="govuk-link--no-underline"
                            >
                                {t("home:login-card-forgotten-label")}{" "}
                            </a>
                        </p>
                        <hr className="govuk-!-margin-bottom-4" />
                        <p className="govuk-body-s">
                            {t("home:login-comingsoon-temp-2")}
                        </p>
                        <ul>
                            <li>
                                <a
                                    className="govuk-link--no-underline"
                                    target="_blank"
                                    href={t(
                                        "home:login-comingsoon-forms-link-1"
                                    )}
                                    rel="noreferrer"
                                >
                                    {t("home:login-comingsoon-forms-label-1")}
                                </a>
                            </li>
                            <li>
                                {" "}
                                <a
                                    className="govuk-link--no-underline"
                                    target="_blank"
                                    href={t(
                                        "home:login-comingsoon-forms-link-2"
                                    )}
                                    rel="noreferrer"
                                >
                                    {t("home:login-comingsoon-forms-label-2")}
                                </a>
                            </li>
                            <li>
                                {" "}
                                <a
                                    className="govuk-link--no-underline"
                                    target="_blank"
                                    href={t(
                                        "home:login-comingsoon-forms-link-3"
                                    )}
                                    rel="noreferrer"
                                >
                                    {t("home:login-comingsoon-forms-label-3")}
                                </a>
                            </li>
                            <li>
                                {" "}
                                <a
                                    className="govuk-link--no-underline"
                                    target="_blank"
                                    href={t(
                                        "home:login-comingsoon-forms-link-4"
                                    )}
                                    rel="noreferrer"
                                >
                                    {t("home:login-comingsoon-forms-label-4")}
                                </a>
                            </li>
                        </ul>
                        <br />

                        <p className="govuk-body-s">
                            {t("home:login-comingsoon-email-link-label")}{" "}
                            <a
                                href={"mailto:" + t("home:login-contact-email")}
                                className="govuk-link--no-underline"
                            >
                                {t("home:login-contact-email")}
                            </a>
                        </p>
                    </div> */}
                </div>

                {/* <LoadingOverlay
                active={showSpinnerState}
                spinner
                text="Logging in"
            /> */}
            </div>
        </>
    );
};

const mapStateToProps = (state) => {
    return {
        currentView: state.currentView,
        search: state.search,
        searchResultsObj: state.searchResultsObj,
        formData: state.formData,
        appealType: state.appealType,
        //form: state.form,
        myCases: state.myCases,
        watchedCases: state.watchedCases,
        myRepresentations: state.myRepresentations,
        awaitingSubmission: state.awaitingSubmission,
        govGateway: state.govGateway,
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        setLoggedInUserId: (userID) => {
            dispatch(setLoggedInUserId(userID));
        },
    };
};

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(
    reduxForm({
        form: "loginForm",
        destroyOnUnmount: false,
    })(Login)
);