import { JSONPath as jsonpath } from "jsonpath-plus";
import useTranslation from "next-translate/useTranslation";
import Link from "next/link";
import { useRouter } from "next/router";
import { parseCookies } from "nookies";
import { connect } from "react-redux";
import {
    deleteAwaitingSubmissionsFromBlob,
    getAwaitingSubmissionFromBlobProxy,
} from "../../actions";
import { getFormCollectionByID } from "../../components/utils";
import transLookup from "../../data/lookuptranslations.json";
import {
    setAwaitingSubmissionDetails,
    setAwaitingSubmissionFromBlob,
} from "../../store/awaitingSubmission/action";
import {
    setCurrentReference,
    setCurrentView,
} from "../../store/currentView/action";

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

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

    function sortByISODate(arr, dateKey) {
        return arr.sort((a, b) => new Date(b[dateKey]) - new Date(a[dateKey]));
    }

    function sortByField(arr, field, ascending = true) {
        return arr.sort((a, b) => {
            if (a[field] < b[field]) return ascending ? -1 : 1;
            if (a[field] > b[field]) return ascending ? 1 : -1;
            return 0; // Equal
        });
    }
    function filterByExistingFieldValue(arr, filterArr, field) {
        const filterValues = filterArr.map((item) => item[field]);
        return arr.filter((item) => !filterValues.includes(item[field]));
    }

    let topthreeRowArr = [];
    let showTopThreeArr = props.awaitingSubmissionFromBlob.case;
    let showTopThreeArrDets = props.awaitingSubmissionFromBlob.value;

    showTopThreeArr = sortByField(showTopThreeArr, "ticketnumber");
    showTopThreeArrDets = sortByField(showTopThreeArrDets, "pinswg_name");

    let mergedArray = showTopThreeArr.map((item1) => {
        let item2 = showTopThreeArrDets.find(
            (item) =>
                item.pinswg_name === item1.ticketnumber ||
                item.appealComplete === item1.ticketnumber
        );
        return { ...item1, ...item2 };
    });

    showTopThreeArr = mergedArray;

    showTopThreeArr = sortByISODate(showTopThreeArr, "createdon");
    // showTopThreeArrDets = sortByISODate(showTopThreeArrDets, "createdon");

    const raisedDate = (datePart) => {
        var dateObj = new Date(datePart);
        return dateObj.toLocaleString();
    };

    const deleteCaseItem = (containerID, caseID) => {
        let cookies = parseCookies();
        console.log("sssss", containerID, caseID);

        deleteAwaitingSubmissionsFromBlob(containerID, caseID)
            .then((data) => {
                return data;
            })
            .then(() => {
                getAwaitingSubmissionFromBlobProxy(containerID).then((data) => {
                    props.setAwaitingSubmissionFromBlob(data);
                    props.setAwaitingSubmissionDetails(data);
                });
            });
    };

    let topThreeOnlyArr = showTopThreeArr.slice(0, 3);

    const TopThreeRow = () => {
        return (
            <div
                className="cardModuleContainer"
                key={"cttr_" + Math.floor(Math.random() * 5)}
            >
                {Object.keys(topThreeOnlyArr).map((key, index) => {
                    let urlname = getFormCollectionByID(
                        showTopThreeArr[key].pinswg_appealcasetype
                    ).UrlName;

                    return (
                        <div className="cardModuleItem" key={"item_" + index}>
                            <div className="cardModuleDetails">
                                <div className="cardModuleReference">
                                    <b>{t("myportal:temp-reference")}:</b>
                                    {showTopThreeArr[key].hasOwnProperty(
                                        "appealComplete"
                                    ) ? (
                                        <b>
                                            {
                                                showTopThreeArr[index]
                                                    .appealComplete
                                            }
                                        </b>
                                    ) : (
                                        <Link
                                            href={
                                                (router.locale == "cy"
                                                    ? "/fymhorth"
                                                    : "/myportal") +
                                                "/" +
                                                urlname +
                                                "?lpa=" +
                                                showTopThreeArr[key][
                                                    "_pinswg_associatedlpa_value"
                                                ] +
                                                "&apt=" +
                                                showTopThreeArr[key]
                                                    .pinswg_appealcasetype +
                                                "&casereference=" +
                                                showTopThreeArr[key]
                                                    .ticketnumber +
                                                "&inid=" +
                                                showTopThreeArr[key].incidentid
                                            }
                                            className="govuk-link--no-underline"
                                            data-id={index}
                                            onClick={() => {
                                                props.setCurrentReference({
                                                    "currentReference":
                                                        showTopThreeArr[key]
                                                            .ticketnumber,

                                                    "currentType":
                                                        "awaitingSubmission",

                                                    "incidentid":
                                                        showTopThreeArr[key]
                                                            .incidentid,

                                                    "appealType":
                                                        showTopThreeArr[key]
                                                            .pinswg_appealcasetype,
                                                });
                                            }}
                                        >
                                            {
                                                showTopThreeArr[index]
                                                    .ticketnumber
                                            }
                                        </Link>
                                    )}
                                    {!showTopThreeArr[key].hasOwnProperty(
                                        "appealComplete"
                                    ) && (
                                        <div className="deleteCase">
                                            <button
                                                title={t(
                                                    "case:do-you-want-to-delete-case-label"
                                                )}
                                                className=" cardModuleRemoveCase govuk-link govuk-link--no-underline govuk-link--inverse "
                                                onClick={() => {
                                                    confirm(
                                                        t(
                                                            "case:do-you-want-to-delete-case-label"
                                                        ) +
                                                            showTopThreeArr[key]
                                                                .ticketnumber +
                                                            "?\n" +
                                                            t(
                                                                "case:do-you-want-to-delete-case-disclaimer-label"
                                                            )
                                                    ) &&
                                                        deleteCaseItem(
                                                            props.containerID,
                                                            showTopThreeArr[key]
                                                                .ticketnumber
                                                        );
                                                }}
                                            >
                                                &mdash;
                                            </button>
                                        </div>
                                    )}
                                </div>
                                <div className="cardModuleReference">
                                    <b>{t("myportal:lpa-reference-label")}:</b>{" "}
                                    {
                                        showTopThreeArr[key]
                                            .pinswg_lpaapplicationreference
                                    }
                                </div>
                                <div className="cardModuleReference">
                                    <b>{t("myportal:appeal-type-label")}:</b>{" "}
                                    {router.locale == "cy"
                                        ? jsonpath(
                                              '$..[?(@.value=="' +
                                                  getFormCollectionByID(
                                                      showTopThreeArr[key]
                                                          .pinswg_appealcasetype
                                                  ).value +
                                                  '")].value_cy',
                                              transLookup
                                          )
                                        : getFormCollectionByID(
                                              showTopThreeArr[key]
                                                  .pinswg_appealcasetype
                                          ).value || ""}
                                </div>
                                <div className="cardModuleReference">
                                    <b>{t("myportal:case-address")}:</b>{" "}
                                    {_.isEmpty(showTopThreeArr)
                                        ? t("myportal:case-address-not-entered")
                                        : _.isEmpty(showTopThreeArr[index])
                                        ? t("myportal:case-address-not-entered")
                                        : _.isEmpty(showTopThreeArr[index])
                                        ? t("myportal:case-address-not-entered")
                                        : _.isEmpty(
                                              showTopThreeArr[index]
                                                  .pinswg_siteaddressline1
                                          )
                                        ? t("myportal:case-address-not-entered")
                                        : showTopThreeArr[index]
                                              .pinswg_siteaddressline1 +
                                          (!_.isEmpty(
                                              showTopThreeArr[index]
                                                  .pinswg_siteaddressline2
                                          )
                                              ? ", " +
                                                showTopThreeArr[index]
                                                    .pinswg_siteaddressline2
                                              : "") +
                                          (!_.isEmpty(
                                              showTopThreeArr[index]
                                                  .pinswg_siteaddresstown
                                          )
                                              ? ", " +
                                                showTopThreeArr[index]
                                                    .pinswg_siteaddresstown
                                              : "")}
                                </div>
                                {showTopThreeArr[key].pinswg_appellantagent !=
                                    null && (
                                    <div className="cardModuleReference">
                                        {showTopThreeArr[key]
                                            .pinswg_appellantagent !=
                                            846040000 && (
                                            <b>
                                                {t("myportal:raised-by-label")}:{" "}
                                            </b>
                                        )}
                                        {showTopThreeArr[key]
                                            .pinswg_appellantagent !=
                                            846040000 &&
                                            (showTopThreeArr[key]
                                                .pinswg_agentcompanyname !=
                                                null &&
                                                showTopThreeArr[key]
                                                    .pinswg_agentcompanyname +
                                                    ", ") +
                                                showTopThreeArr[key]
                                                    .pinswg_agentfirstname +
                                                " " +
                                                showTopThreeArr[key]
                                                    .pinswg_agentlastname}
                                    </div>
                                )}
                                {showTopThreeArr[key].pinswg_appellantagent !=
                                    846040000 && (
                                    <div className="cardModuleReference">
                                        <b>
                                            {t("myportal:on-behalf-of-label")}:{" "}
                                        </b>
                                        {showTopThreeArr[key]
                                            .pinswg_appellantfirstname +
                                            " " +
                                            showTopThreeArr[key]
                                                .pinswg_appellantlastname}
                                    </div>
                                )}
                                <div className="cardModuleReference">
                                    <b>
                                        {router.locale == "cy" ? "ACLl" : "LPA"}
                                        :
                                    </b>
                                    {router.locale == "cy"
                                        ? jsonpath(
                                              '$..[?(@.value=="' +
                                                  showTopThreeArr[key][
                                                      "pinswg_lpaname"
                                                  ] +
                                                  '")].value_cy',
                                              transLookup
                                          )
                                        : showTopThreeArr[key][
                                              "pinswg_lpaname"
                                          ] || ""}
                                </div>
                                <div className="cardModuleReference">
                                    <b>{t("myportal:date-raised")}:</b>
                                    {"  "}
                                    {raisedDate(showTopThreeArr[key].createdon)}
                                </div>{" "}
                                {showTopThreeArr[key].hasOwnProperty(
                                    "appealComplete"
                                ) && (
                                    <div className="cardModuleReference">
                                        <b>
                                            {" "}
                                            {t(
                                                "myportal:submission-processing-label"
                                            )}
                                            .....
                                        </b>
                                    </div>
                                )}
                            </div>
                        </div>
                    );
                })}
            </div>
        );
    };

    return (
        <div
            className="card"
            id="awaiting-submission-card"
            key="awaiting-submission-card"
        >
            <div className="card-body">
                <h3 className="heading-small card-heading">
                    {t("myportal:awatitingsubmission-card-title")}
                </h3>

                <TopThreeRow />
                {props.awaitingSubmissionFromBlob["@odata.count"] > 1 && (
                    <div className="cardVieAll">
                        <Link
                            href={
                                router.locale != "en"
                                    ? "/" +
                                      router.locale +
                                      "/fymhorth/gweldpopeth"
                                    : "/myportal/viewall"
                            }
                            className="govuk-link--no-underline"
                            onClick={() => {
                                setCurrentView({
                                    "viewName": "Awaiting Submission",
                                    "viewKey": "awaitingSubmissionDetails",
                                });
                            }}
                        >
                            {t("myportal:viewall-link")}
                        </Link>
                    </div>
                )}
            </div>
        </div>
    );
};

const mapDispatchToProps = (dispatch) => {
    return {
        setCurrentView: (currentView) => {
            dispatch(setCurrentView(currentView));
        },
        setCurrentReference: (currentReference) => {
            dispatch(setCurrentReference(currentReference));
        },
        setAwaitingSubmissionFromBlob: (awaitingSubmission) => {
            dispatch(setAwaitingSubmissionFromBlob(awaitingSubmission));
        },
        setAwaitingSubmissionDetails: (awaitingSubmissionDetails) => {
            dispatch(setAwaitingSubmissionDetails(awaitingSubmissionDetails));
        },
    };
};

export default connect(null, mapDispatchToProps)(AwaitingSubmissionFromBlob);