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 {
    deleteAwaitingSubmissions,
    deleteWatchedCases,
    getAwaitingSubmissionProxy,
    getWatchedCasesProxy
} from "../../actions/services/portalService";
import {
    deleteMyRepresentationsFromBlob,
    getRepsFromBlobProxy
} from "../../actions/services/documentService";
import { consoleLogger } from "../../actions/core/logger";
import transLookup from "../../data/lookuptranslations.json";
import {
    setAwaitingSubmission,
    setAwaitingSubmissionDetails
} from "../../store/awaitingSubmission/action";
import {
    setCurrentReference,
    setCurrentView,
    setRepresentationCapacity
} from "../../store/currentView/action";
import {
    setMyRepresentations,
    setMyRepresentationsDetails
} from "../../store/myRepresentations/action";
import {
    setWatchedCases,
    setWatchedCasesDetails
} from "../../store/watchedCases/action";
import { getFormCollectionByID, getDetailsProxy } from "../utils";

const TopThree = (props) => {
    let { t } = useTranslation();
    const {
        showTopThree,
        showDetails,
        setCurrentReference,
        topThreeType,
        setWatchedCases,
        setWatchedCasesDetails,
        setAwaitingSubmission,
        setAwaitingSubmissionDetails,
        setMyRepresentations,
        setMyRepresentationsDetails,
        setRepresentationCapacity
    } = props;

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

    let topthreeRow = [];
    let showTopThreeArr = showTopThree.value;

    Object.keys(showTopThreeArr).map((key, index) => {
        let createdDate = showTopThreeArr[key].repfile_name.split("_-_");
        createdDate =
            createdDate[0].replace(
                /(?<=\d{4}-\d{2}-\d{2})-(?=\d{2}:\d{2}:\d{2})/,
                "T"
            ) + "Z";

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

    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) => {
                        (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 isLPA =
        props.accountDetails.accountDetails[
            "pinswg_typeofinvolvement@OData.Community.Display.V1.FormattedValue"
        ] == "LPA"
            ? true
            : false;

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

        deleteMyRepresentationsFromBlob(containerID, caseID, repfile)
            .then((data) => {
                return data;
            })
            .then(() => {
                getRepsFromBlobProxy(containerID)
                    .then((data) => {
                        setMyRepresentations(data);
                        setMyRepresentationsDetails(data);
                    })
                    .catch((error) => {
                        consoleLogger(error);
                        return null;
                    })
                    .then(() => {
                        setCurrentView({
                            "viewName": "My Representations",
                            "viewKey": "myRepresentations"
                        });
                    });
            });
    };

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

    const repRaisedDate = (datePart) => {
        var dateStr = datePart.split("_-_")[0];
        var timeStr = dateStr.split("-")[3];

        var dateObj = new Date(
            dateStr.split("-")[0] +
                "-" +
                dateStr.split("-")[1] +
                "-" +
                dateStr.split("-")[2] +
                " " +
                timeStr
        );

        return dateObj.toLocaleString();
    };

    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>
                        {showTopThreeArr[key].hasOwnProperty("repComplete") ? (
                            <b>{showTopThreeArr[key].pinswg_name}</b>
                        ) : (
                            <span
                                // href="#"
                                // href={{
                                //     pathname:
                                //         router.locale == "cy"
                                //             ? "/fymhorth/representation"
                                //             : "/myportal/representation",
                                //     query: {
                                //         case: showTopThreeArr[key].ticketnumber,
                                //         state: "edit",
                                //         created:
                                //             showTopThreeArr[key].repfile_name,
                                //     },
                                // }}
                                className="govuk-link--no-underline"
                                style={{
                                    color: "#0360a6",
                                    cursor: "pointer",
                                    fontWeight: "bold"
                                }}
                                data-id={index}
                                onClick={() => {
                                    setCurrentReference({
                                        "statuscode":
                                            showTopThreeArr[key].statuscode,
                                        "ticketnumber":
                                            showTopThreeArr[key].ticketnumber,
                                        "currentReference":
                                            showTopThreeArr[key].caseRef,
                                        "currentType": topThreeType,
                                        "incidentid":
                                            showTopThreeArr[key].incidentID,
                                        "appealType":
                                            showTopThreeArr[key].appealType,
                                        "repDetails": showTopThreeArr[key]
                                    });
                                    isLPA && setRepresentationCapacity("LPA");
                                    router.push({
                                        pathname:
                                            router.locale == "cy"
                                                ? "/fymhorth/representation"
                                                : "/myportal/representation",
                                        query: {
                                            case:
                                                showTopThreeArr[key]
                                                    .ticketnumber ||
                                                showTopThreeArr[key].caseRef ||
                                                showTopThreeArr[key]
                                                    .pinswg_name,
                                            state: "edit",
                                            created:
                                                showTopThreeArr[key]
                                                    .repfile_name
                                        }
                                    });
                                }}
                            >
                                {showTopThreeArr[key].pinswg_name}
                            </span>
                        )}
                        {!showTopThreeArr[key].hasOwnProperty(
                            "repComplete"
                        ) && (
                            <div className="deleteCase">
                                <button
                                    title={t(
                                        "case:do-you-want-to-delete-rep-label"
                                    )}
                                    className=" cardModuleRemoveCase govuk-link govuk-link--no-underline govuk-link--inverse "
                                    onClick={() => {
                                        confirm(
                                            t(
                                                "case:do-you-want-to-delete-rep-label"
                                            ) +
                                                showTopThreeArr[key]
                                                    .pinswg_name +
                                                "?\n" +
                                                t(
                                                    "case:do-you-want-to-delete-case-disclaimer-label"
                                                )
                                        ) &&
                                            deleteRepItem(
                                                props.accountDetails
                                                    .containerID,
                                                showTopThreeArr[key].caseRef,
                                                showTopThreeArr[key]
                                                    .repfile_name
                                            );
                                    }}
                                >
                                    &mdash;
                                </button>
                            </div>
                        )}
                    </div>
                    <div className="cardModuleReference">
                        <b>{t("myportal:representation-type")}:</b>
                        {"  "}

                        {router.locale == "cy"
                            ? jsonpath({
                                  path:
                                      '$..[?(@ && @.value=="' +
                                      showTopThreeArr[key].representationType +
                                      '")].value_cy',
                                  json: transLookup,
                                  eval: true
                              })
                            : showTopThreeArr[key].representationType || ""}
                    </div>
                    <div className="cardModuleReference">
                        <b>{t("myportal:capacity")}:</b>
                        {"  "}
                        {router.locale == "cy"
                            ? jsonpath({
                                  path:
                                      '$..[?(@ && @.value=="' +
                                      showTopThreeArr[key]
                                          .representationCapacity +
                                      '"  ||@.value_cy=="' +
                                      showTopThreeArr[key]
                                          .representationCapacity +
                                      '" )].value_cy',
                                  json: transLookup,
                                  eval: true
                              })
                            : jsonpath({
                                    path:
                                        '$..[?(@ && @.value_cy=="' +
                                        showTopThreeArr[key]
                                            .representationCapacity +
                                        '")].value',
                                    json: transLookup,
                                    eval: true
                                }).length > 0
                              ? jsonpath({
                                    path:
                                        '$..[?(@ && @.value_cy=="' +
                                        showTopThreeArr[key]
                                            .representationCapacity +
                                        '")].value',
                                    json: transLookup,
                                    eval: true
                                })
                              : showTopThreeArr[key].representationCapacity}
                    </div>
                    <div className="cardModuleReference">
                        <b>{t("myportal:date-raised")}:</b>
                        {"  "}
                        {repRaisedDate(showTopThreeArr[key].repfile_name)}
                    </div>{" "}
                    <div className="cardModuleReference">
                        <b>{router.locale == "cy" ? "ACLl" : "LPA"}:</b>
                        {"  "}

                        {router.locale == "cy"
                            ? jsonpath({
                                  path:
                                      '$..[?(@ && @.value=="' +
                                      showTopThreeArr[key][
                                          "_pinswg_localplanningauthority_value@OData.Community.Display.V1.FormattedValue"
                                      ] +
                                      '")].value_cy',
                                  json: transLookup,
                                  eval: true
                              })
                            : showTopThreeArr[key][
                                  "_pinswg_localplanningauthority_value@OData.Community.Display.V1.FormattedValue"
                              ] || ""}
                    </div>
                    {showTopThreeArr[key].hasOwnProperty("repComplete") && (
                        <div className="cardModuleReference">
                            <b>
                                {" "}
                                {t("myportal:submission-processing-label")}
                                .....
                            </b>
                        </div>
                    )}
                </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 mapStateToProps = (state) => {
    return {
        // currentView: state.currentView,
        accountDetails: state.accountDetails
        // search: state.search,
        // searchResultsObj: state.searchResultsObj,
    };
};

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));
        },
        setMyRepresentations: (myRepresentations) => {
            dispatch(setMyRepresentations(myRepresentations));
        },
        setMyRepresentationsDetails: (myRepresentationsDetails) => {
            dispatch(setMyRepresentationsDetails(myRepresentationsDetails));
        },
        setRepresentationCapacity: (representationCapacity) => {
            dispatch(setRepresentationCapacity(representationCapacity));
        }
    };
};

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