import cookie from "cookie-cutter";
import useTranslation from "next-translate/useTranslation";
import { useRouter } from "next/router";
import { useState } from "react";
import { formatDates } from "../utils";
export default function CaseNoticeBanner(props) {
    let { t, lang } = useTranslation();

    const { messagesObj } = props;
    const router = useRouter();

    const noticeContent = messagesObj.value[0].description;
    const noticeTitle = messagesObj.value[0].subject.split("Banner ")[1];

    const bannerOpenCookie = typeof cookie.get("pedwNotice") == "undefined";
    let messagesObjArr = messagesObj.value;

    return (
        <>
            {messagesObjArr.map((message, index) => (
                <div className="govuk-warning-text noticebanner" key={index}>
                    <strong className="govuk-warning-text__text">
                        <span className="govuk-visually-hidden">Warning</span>
                    </strong>
                    <div>
                        <div className=" govuk-body-s">
                            <h2 className="govuk-heading-s">
                                {(
                                    message.subject.match(
                                        new RegExp(">>>", "g")
                                    ) || []
                                ).length > 0
                                    ? router.locale == "cy"
                                        ? message.subject
                                              .split("Banner ")[1]
                                              .split(">>>")[1]
                                        : message.subject
                                              .split("Banner ")[1]
                                              .split(">>>")[0]
                                    : (
                                          message.subject.match(
                                              new RegExp(";", "g")
                                          ) || []
                                      ).length > 0
                                    ? router.locale == "cy"
                                        ? message.subject
                                              .split("Banner ")[1]
                                              .split(";")[1]
                                        : message.subject
                                              .split("Banner ")[1]
                                              .split(";")[0]
                                    : message.subject.split("Banner ")[1]}
                            </h2>
                        </div>
                        <div className="govuk-body-s">
                            {(
                                message.description.match(
                                    new RegExp(">>>", "g")
                                ) || []
                            ).length > 0
                                ? router.locale == "cy"
                                    ? message.description.split(">>>")[1]
                                    : message.description.split(">>>")[0]
                                : (
                                      message.description.match(
                                          new RegExp(";", "g")
                                      ) || []
                                  ).length > 0
                                ? router.locale == "cy"
                                    ? message.description.split(";")[1]
                                    : message.description.split(";")[0]
                                : message.description}
                        </div>
                        <div className="govuk-body-xs govuk-!-margin-bottom-0 ">
                            {t("case:date-raised")}:{" "}
                            {formatDates(message.createdon)}
                        </div>
                    </div>
                </div>
            ))}
        </>
    );
}