import { JSONPath as jsonpath } from "jsonpath-plus";
import _ from "lodash";
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 {
    deleteAwaitingSubmissions,
    deleteWatchedCases,
    getAwaitingSubmissionProxy,
    getPortalModuleDetailsProxy,
    getWatchedCasesProxy,
} from "../../actions";
import { getFormCollectionByID, getDetailsProxy } from "../../components/utils";
import transLookup from "../../data/lookuptranslations.json";
import {
    setAwaitingSubmission,
    setAwaitingSubmissionDetails,
} from "../../store/awaitingSubmission/action";
import { setCurrentReference } from "../../store/currentView/action";
import {
    setSearchDetails,
    setSearchResults,
} from "../../store/searchOutput/action";
import {
    setWatchedCases,
    setWatchedCasesDetails,
} from "../../store/watchedCases/action";

const TopThree = (props) => {
    let { t } = useTranslation();
    const {
        currentView,
        showTopThree,
        showDetails,
        setCurrentReference,
        topThreeType,
        setWatchedCases,
        setWatchedCasesDetails,
        setAwaitingSubmission,
        setAwaitingSubmissionDetails,
        setSearchResults,
        setSearchDetails,
        showLoginCheck,
    } = props;

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

    let topthreeRow = [];

    let showTopThreeArr;

    showTopThreeArr = props.myReps ? showTopThree : showTopThree.value;

    Object.keys(showTopThreeArr).map((key, index) => {
        let createdDate = parseInt(showTopThreeArr[key].createdon);
        showTopThreeArr[key].createdDate = createdDate;
    });

    showTopThreeArr.sort(function compare(a, b) {
        var dateA = new Date(a.createdDate);
        var dateB = new Date(b.createdDate);
        return dateB - dateA;
    });

    // check start

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

    //let showTopThreeArr = showTopThree.value;
    let showTopThreeArrDets = showDetails;

    showTopThreeArr = sortByField(showTopThreeArr, "ticketnumber");
    //console.log("showTopThreeArr:", showTopThreeArr);
    showTopThreeArrDets = sortByField(showTopThreeArrDets, "pinswg_name");
    //console.log("showTopThreeArrDets:", showTopThreeArrDets);

    showTopThreeArrDets = showTopThreeArrDets.flatMap((item) => item.value);

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

    showTopThreeArr = mergedArray;

    showTopThreeArr = sortByISODate(showTopThreeArr, "createdon");

    // check end

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

    const deleteItem = (caseID, topThreeType) => {
        let cookies = parseCookies();
        //console.log("sssss", caseID, topThreeType);
        topThreeType == "watchedCases" &&
            deleteWatchedCases(caseID)
                .then((data) => data)
                .then(() => {
                    getWatchedCasesProxy(cookies.pinsUser).then((data) => {
                        let showWatchedCases = (submittedArr) => {
                            const required = submittedArr.value.filter((el) => {
                                return (
                                    el.pinswg_representationsubmitted == null
                                );
                            });

                            let newObj = {};
                            return Object.assign(newObj, {
                                "@odata.count": required.length,
                                "value": required,
                            });
                        };

                        data = showWatchedCases(data);

                        data.value.sort(function compare(a, b) {
                            var dateA = new Date(a.createdon);
                            var dateB = new Date(b.createdon);
                            return dateB - dateA;
                        });
                        setWatchedCases(data),
                            getDetailsProxy(data, "myWatchedCases").then(
                                (data) => {
                                    setWatchedCasesDetails(data);
                                }
                            );
                    });
                });

        topThreeType == "awaitingSubmission" &&
            deleteAwaitingSubmissions(caseID)
                .then((data) => {
                    return data;
                })
                .then(() => {
                    getAwaitingSubmissionProxy(cookies.pinsUser).then(
                        (data) => {
                            setAwaitingSubmission(data),
                                getDetailsProxy(
                                    data,
                                    "awaitingSubmission"
                                ).then((data) => {
                                    //console.log(
                                    //     "submission get details:",
                                    //     data
                                    // );
                                    setAwaitingSubmissionDetails(data);
                                });
                        }
                    );
                });
    };

    const getIncidentId = (topThreeType, objArr) => {
        switch (topThreeType) {
            case "myCases":
                return objArr.incidentid;
                break;
            case "watchedCases":
                return objArr._pinswg_watchedcase_value;
                break;
            case "myRepresentations":
                return objArr.ticketnumber;
                break;
            case "awaitingSubmission":
                return objArr.ticketnumber;
                break;
            default:
            // code block
        }
    };

    let topThreeOnlyArr = showTopThreeArr.slice(0, 3);
    Object.keys(topThreeOnlyArr).map((key, index) => {
        topthreeRow.push(
            <div className="cardModuleItem" key={index}>
                <div className="cardModuleDetails">
                    <div className="cardModuleReference">
                        <b>{t("myportal:case-reference")}:</b>
                        {topThreeType == "myCases" &&
                        showTopThreeArr[key].pinswg_publishtoweb === false ? (
                            <span>
                                {showTopThreeArr[key].ticketnumber}{" "}
                                <b> - {t("myportal:appeal-pending-label")}</b>
                            </span>
                        ) : (
                            <Link
                                href={
                                    topThreeType == "awaitingSubmission" ||
                                    topThreeType == "awaitingSubmissionFromBlob"
                                        ? router.locale == "cy"
                                            ? "/fymhorth/parhauigyflwyno"
                                            : "/myportal" +
                                              "/" +
                                              getFormCollectionByID(
                                                  showTopThreeArr[key]
                                                      .pinswg_appealcasetype
                                              ).UrlName +
                                              "?lpa=" +
                                              showTopThreeArr[key][
                                                  "_pinswg_associatedlpa_value"
                                              ] +
                                              "&apt=" +
                                              showTopThreeArr[key]
                                                  .pinswg_appealcasetype +
                                              "&casereference=" +
                                              showTopThreeArr[key]
                                                  .pinswg_title +
                                              "&inid=" +
                                              showTopThreeArr[key].incidentid
                                        : router.locale == "cy"
                                        ? "/fymhorth/achos/" +
                                          showTopThreeArr[key].ticketnumber +
                                          "?key=" +
                                          topThreeType +
                                          "&appealType=" +
                                          showTopThreeArr[key]
                                              .pinswg_appealcasetype
                                        : "/myportal/case/" +
                                          showTopThreeArr[key].ticketnumber +
                                          "?key=" +
                                          topThreeType +
                                          "&appealType=" +
                                          showTopThreeArr[key]
                                              .pinswg_appealcasetype
                                }
                                className="govuk-link--no-underline"
                                data-id={index}
                                onClick={() => {
                                    setSearchResults(
                                        props.props[topThreeType][topThreeType]
                                    ),
                                        setSearchDetails(
                                            props.props[topThreeType][
                                                topThreeType + "Details"
                                            ]
                                        ),
                                        setCurrentReference({
                                            "ticketnumber":
                                                showTopThreeArr[key]
                                                    .ticketnumber,
                                            "currentReference":
                                                topThreeType != "watchedCases"
                                                    ? topThreeType !=
                                                      "myRepresentations"
                                                        ? showTopThreeArr[key]
                                                              .ticketnumber
                                                        : showTopThreeArr[key][
                                                              "_pinswg_case_value@OData.Community.Display.V1.FormattedValue"
                                                          ]
                                                    : showTopThreeArr[key][
                                                          "_pinswg_watchedcase_value@OData.Community.Display.V1.FormattedValue"
                                                      ],
                                            "currentType": topThreeType,

                                            "incidentid": getIncidentId(
                                                topThreeType,
                                                showTopThreeArr[key]
                                            ),

                                            "appealType":
                                                showTopThreeArr[key]
                                                    .pinswg_appealcasetype,
                                        });
                                }}
                            >
                                {topThreeType != "watchedCases"
                                    ? topThreeType != "myRepresentations"
                                        ? showTopThreeArr[key].ticketnumber
                                        : showTopThreeArr[key][
                                              "_pinswg_case_value@OData.Community.Display.V1.FormattedValue"
                                          ]
                                    : showTopThreeArr[key][
                                          "_pinswg_watchedcase_value@OData.Community.Display.V1.FormattedValue"
                                      ]}{" "}
                            </Link>
                        )}
                        {topThreeType == "watchedCases" && !props.myReps && (
                            <div className="deleteCase">
                                <button
                                    title={t(
                                        "case:you-have-stopped-watching-label"
                                    )}
                                    className=" cardModuleRemoveCase govuk-link govuk-link--no-underline govuk-link--inverse "
                                    onClick={() => {
                                        confirm(
                                            t(
                                                "case:you-have-stopped-watching-label"
                                            ) +
                                                showTopThreeArr[key][
                                                    "_pinswg_watchedcase_value@OData.Community.Display.V1.FormattedValue"
                                                ]
                                        ) &&
                                            deleteItem(
                                                showTopThreeArr[key]
                                                    .pinswg_watchlistid,
                                                "watchedCases"
                                            );
                                    }}
                                >
                                    &mdash;
                                </button>
                            </div>
                        )}
                        {topThreeType == "awaitingSubmission" && (
                            <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"
                                                )
                                        ) &&
                                            deleteItem(
                                                showTopThreeArr[key].incidentid,
                                                "awaitingSubmission"
                                            );
                                    }}
                                >
                                    &mdash;
                                </button>
                            </div>
                        )}
                    </div>
                    <div className="cardModuleReference">
                        <b>{t("myportal:appeal-type-label")}:</b>{" "}
                        {router.locale == "cy"
                            ? jsonpath({
                                  path:
                                      '$..[?(@ && @.value=="' +
                                      showTopThreeArr[key][
                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
                                      ] +
                                      '")].value_cy',
                                  json: transLookup,
                                  eval: true,
                              })
                            : showTopThreeArr[key][
                                  "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
                              ] || ""}
                    </div>
                    {/* )} */}
                    {/* {topThreeType != "awaitingSubmission" ? ( */}
                    <div className="cardModuleReference">
                        <b>{t("myportal:case-address")}:</b>{" "}
                        {_.isEmpty(showTopThreeArr[key])
                            ? t("myportal:case-address-not-entered")
                            : _.isEmpty(showTopThreeArr[key])
                            ? t("myportal:case-address-not-entered")
                            : _.isEmpty(showTopThreeArr[key])
                            ? t("myportal:case-address-not-entered")
                            : _.isEmpty(
                                  showTopThreeArr[key].pinswg_siteaddressline1
                              )
                            ? t("myportal:case-address-not-entered")
                            : showTopThreeArr[key].pinswg_siteaddressline1 +
                              (!_.isEmpty(
                                  showTopThreeArr[key].pinswg_siteaddressline2
                              )
                                  ? ", " +
                                    showTopThreeArr[key].pinswg_siteaddressline2
                                  : "") +
                              (!_.isEmpty(
                                  showTopThreeArr[key].pinswg_siteaddresstown
                              )
                                  ? ", " +
                                    showTopThreeArr[key].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_appellantfirstname != null && (
                        <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({
                                  path:
                                      '$..[?(@ && @.value=="' +
                                      showTopThreeArr[key][
                                          "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
                                      ] +
                                      '")].value_cy',
                                  json: transLookup,
                                  eval: true,
                              })
                            : showTopThreeArr[key][
                                  "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
                              ] || ""}
                    </div>
                    {topThreeType == "awaitingSubmission" ? (
                        <div className="carModuleAddress">
                            Case Incomplete, not submitted
                        </div>
                    ) : (
                        ""
                    )}
                    {topThreeType != "watchedCases" && (
                        <div className="cardModuleReference">
                            <b>{t("myportal:date-raised")}:</b>
                            {"  "}
                            {raisedDate(showTopThreeArr[key].createdon)}
                        </div>
                    )}
                    {topThreeType == "watchedCases" &&
                        props.myReps &&
                        showTopThreeArr[key].pinswg_representationsubmitted !=
                            null && (
                            <div className="cardModuleReference">
                                <b>{t("myportal:representation-submitted")}:</b>
                                {"  "}
                                {raisedDate(
                                    showTopThreeArr[key]
                                        .pinswg_representationsubmitted
                                )}
                            </div>
                        )}
                    {topThreeType == "watchedCases" &&
                        props.myReps &&
                        showTopThreeArr[key].pinswg_representationtype !=
                            null && (
                            <div className="cardModuleReference">
                                <b>{t("myportal:representation-type")}:</b>
                                {"  "}
                                {showTopThreeArr[key].pinswg_representationtype}
                            </div>
                        )}
                </div>
                {/* {topThreeType == "watchedCases" && !props.myReps && (
                    <div className="">
                        <button
                            title={t("case:you-have-stopped-watching-label")}
                            className=" cardModuleRemoveCase govuk-link govuk-link--no-underline govuk-link--inverse "
                            onClick={() => {
                                confirm(
                                    t("case:you-have-stopped-watching-label") +
                                        showTopThreeArr[key][
                                            "_pinswg_watchedcase_value@OData.Community.Display.V1.FormattedValue"
                                        ]
                                ) &&
                                    deleteItem(
                                        showTopThreeArr[key].pinswg_watchlistid,
                                        "watchedCases"
                                    );
                            }}
                        >
                            &mdash;
                        </button>
                    </div>
                )}
                {topThreeType == "awaitingSubmission" && (
                    <div className="">
                        <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"
                                        )
                                ) &&
                                    deleteItem(
                                        showTopThreeArr[key].incidentid,
                                        "awaitingSubmission"
                                    );
                            }}
                        >
                            &mdash;
                        </button>
                    </div>
                )} */}
            </div>
        );
    });

    let noRecordsLabel = "";
    switch (topThreeType) {
        case "watchedCases":
            noRecordsLabel = t("myportal:norecords-watched-cases");
            break;
        case "myRepresentations":
            noRecordsLabel = t("myportal:norecords-representations");
            break;
        case "myCases":
            noRecordsLabel = t("myportal:norecords-cases");
            break;
        case "awaitingSubmission":
            noRecordsLabel = t("myportal:norecords-awaiting-submissions");
            break;
    }
    return (
        <>
            {topthreeRow.length == 0 ? (
                <div>{noRecordsLabel}</div>
            ) : (
                topthreeRow
            )}
        </>
    );
};

const mapDispatchToProps = (dispatch) => {
    return {
        setCurrentReference: (currentReference) => {
            dispatch(setCurrentReference(currentReference));
        },
        setWatchedCases: (watchedCases) => {
            dispatch(setWatchedCases(watchedCases));
        },
        setWatchedCasesDetails: (watchedCasesDetails) => {
            dispatch(setWatchedCasesDetails(watchedCasesDetails));
        },
        setAwaitingSubmission: (awaitingSubmission) => {
            dispatch(setAwaitingSubmission(awaitingSubmission));
        },
        setAwaitingSubmissionDetails: (awaitingSubmissionDetails) => {
            dispatch(setAwaitingSubmissionDetails(awaitingSubmissionDetails));
        },
        setSearchResults: (searchResults) => {
            dispatch(setSearchResults(searchResults));
        },
        setSearchDetails: (searchDetails) => {
            dispatch(setSearchDetails(searchDetails));
        },
    };
};

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