import useTranslation from "next-translate/useTranslation";
import Link from "next/link";
import { useRouter } from "next/router";

export default function MakeNewAppeal(props) {
    let { t } = useTranslation();

    const { docsOffline } = props;

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

    let ShowDocLinks = false;
    let checkShowDocLinks = docsOffline != false ? true : false;

    const getDocLink = (docsOffline) => {
        var startTime = docsOffline.split(",")[0];
        var endTime = docsOffline.split(",")[1];

        // console.log(startTime);
        // console.log(endTime);

        var currentDate = new Date();

        var startDate = new Date(currentDate.getTime());
        startDate.setHours(startTime.split(":")[0]);
        startDate.setMinutes(startTime.split(":")[1]);
        startDate.setSeconds(startTime.split(":")[2]);

        var endDate = new Date(currentDate.getTime());
        endDate.setHours(endTime.split(":")[0]);
        endDate.setMinutes(endTime.split(":")[1]);
        endDate.setSeconds(endTime.split(":")[2]);

        // console.log(startDate);
        // console.log(endDate);
        // console.log(currentDate);

        var valid = startDate < currentDate && endDate > currentDate;
        ShowDocLinks = valid;
    };

    console.log("docsOffline", docsOffline, getDocLink(docsOffline));

    return (
        <div className="card" id="new-appeal-card">
            <div className="card-body">
                <h2 className="govuk-heading-s">
                    {t("myportal:makenewappeal-card-title")}
                </h2>
                <p className="govuk-body-s">
                    {t("myportal:makenewappeal-card-paragraph-one")}{" "}
                    <Link href={t("myportal:makenewappeal-card-guidance-link")}>
                        {t("myportal:makenewappeal-card-link-label")}
                    </Link>
                </p>
                <p className="govuk-body-s">
                    {t("myportal:makenewappeal-card-paragraph-two")}
                </p>
                {ShowDocLinks ? (
                    <div className="govuk-warning-text ">
                        <span
                            className="govuk-warning-text__icon"
                            aria-hidden="true"
                        >
                            !
                        </span>
                        <strong className="govuk-warning-text__text govuk-!-margin-top-2">
                            <span className="govuk-visually-hidden">
                                Notice
                            </span>
                            {t("myportal:docsoffline-newappeal-label")}
                        </strong>
                    </div>
                ) : (
                    <div>
                        <Link href={"/newappeal"} className="govuk-button">
                            {t("myportal:makenewappeal-card-button-label")}
                        </Link>
                    </div>
                )}

                <p className="govuk-body-s govuk govuk-!-margin-top-5">
                    {t("myportal:makenewappeal-card-paragraph-three")}
                </p>
                <ul>
                    <li>
                        {" "}
                        {t(
                            "myportal:makenewappeal-card-paragraph-three-bullet-one"
                        )}
                    </li>
                    <li>
                        {" "}
                        {t(
                            "myportal:makenewappeal-card-paragraph-three-bullet-two"
                        )}
                    </li>
                </ul>
                <p className="govuk-body-s govuk govuk-!-margin-top-5">
                    {t("myportal:makenewappeal-card-paragraph-four")}
                </p>
            </div>
        </div>
    );
}