import useTranslation from "next-translate/useTranslation";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import { connect } from "react-redux";
import { parseCookies } from "nookies";
import { setLoggedInUserId } from "../../store/accountDetails/action";
import { signOut, useSession } from "next-auth/react";
import CaseComment from "./casecomment";

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;

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

    const { data: session } = useSession();

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

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

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

    const cookies = parseCookies();

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

    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>
        </>;
    }

    const signInButton = () => {
        router.push(
            `${
                router.locale == "cy" ? "/awd/mewngofnodi" : "/auth/signin"
            }?callbackUrl=${encodeURIComponent(
                window.location.href
            )}&error=EmailSignin`
        );
    };
    return (
        <>
            <div className="card" id="login-card">
                <div className="card-body active">
                    <h3 className="heading-mid card-heading">
                        {t("home:signin-benefits-title")}
                    </h3>
                    <p className="govuk-body-s">
                        {t("home:signin-benefits-paragraph")}
                    </p>
                    <ul className="cardList-nobullet">
                        <li className="govuk-body-s">
                            {" "}
                            <strong>
                                {" "}
                                {t("home:login-card-title-temp")}{" "}
                            </strong>{" "}
                            {t("home:login-comingsoon-temp-1")}
                        </li>
                        <li>
                            <strong>{t("home:casescomment-card-title")}</strong>{" "}
                            {t("home:casescomment-card-paragraph-two")}
                        </li>
                        <li>
                            <strong> {t("home:watch-case-card-title")}</strong>{" "}
                            {t("home:watch-case-paragraph-one")}
                        </li>
                    </ul>
                    <div className="govuk-form-group govuk-!-margin-top-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>
                        <p className="govuk-body-s">
                            {t("home:casescomment-card-paragraph-one")}{" "}
                            <a
                                href={"mailto:" + t("home:login-contact-email")}
                                className="govuk-link--no-underline"
                            >
                                {t("home:login-contact-email")}
                            </a>
                        </p>
                    </div>
                </div>
            </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,
    };
};

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

export default connect(mapStateToProps, mapDispatchToProps)(Login);