import { signOut } from "next-auth/react";
import useTranslation from "next-translate/useTranslation";
import { useRouter } from "next/router";
import { useState, useEffect } from "react";
import { destroyCookie, parseCookies, setCookie } from "nookies";
import { signIn, useSession } from "next-auth/react";

const WatchModal = (props) => {
    let { t } = useTranslation();

    const { isOpen, onClose } = props;

    const currentType = props.currentType;
    const casesObj = props.casesObj;
    const { data: session, status } = useSession();
    const router = useRouter();
    const { locale } = router;

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

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

    if (!isOpen) return null;

    return (
        <>
            <div
                className={open ? "modal fade show" : "modal fade"}
                style={{
                    display: open ? "flex" : "none",
                }}
            >
                <div className="modal-dialog">
                    <div className="modal-content">
                        <h3>Watch case</h3>
                        <p className="govuk-body">
                            {!session
                                ? "  You will now be signed in to watch this case"
                                : " you are logged in already"}
                        </p>
                        <div className="govuk-checkboxes__item">
                            <input
                                className="govuk-checkboxes__input"
                                type="checkbox"
                                name="addInvolvement"
                            />
                            <label
                                className="govuk-label-s govuk-checkboxes__label"
                                htmlFor="addInvolvement"
                            >
                                {} Yes, I want you want to be emailed updates
                                for case
                                <div> {casesObj.title}</div>
                            </label>
                        </div>
                        <div>
                            <button
                                className="govuk-button"
                                onClick={() => {
                                    setCookie(
                                        null,
                                        "pedwWatchCase",
                                        currentType == "searchResultsObj"
                                            ? detailsObj.pinswg_name
                                            : currentType == "directResultsObj"
                                            ? casesObj.title
                                            : casesObj.reference,
                                        {
                                            path: "/",
                                            expires: expDate,
                                        }
                                    ),
                                        signIn();
                                }}
                            >
                                Yes
                            </button>{" "}
                            <button
                                className="govuk-button govuk-button--secondary"
                                onClick={onClose}
                            >
                                No
                            </button>
                        </div>
                    </div>
                </div>
                <div className="modal-backdrop fade show"></div>
            </div>
        </>
    );
};

export default WatchModal;