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

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

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

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

    Object.keys(showTopThreeArrDets).map((key, index) => {
        let createdDate = showTopThreeArrDets[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;
    });

    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]
                                                    .pinswg_name +
                                                "&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].pinswg_name}
                                        </Link>
                                    )}
                                </div>
                                <div>
                                    <b>{t("myportal:lpa-reference-label")}:</b>{" "}
                                    {
                                        showTopThreeArr[key]
                                            .pinswg_lpaapplicationreference
                                    }
                                </div>
                                <div>
                                    <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="carModuleAddress">
                                    <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>
                                {showTopThreeArrDets[key]
                                    .pinswg_appellantagent != null && (
                                    <div>
                                        {showTopThreeArrDets[key]
                                            .pinswg_appellantagent !=
                                            846040000 && (
                                            <b>
                                                {t("myportal:raised-by-label")}:{" "}
                                            </b>
                                        )}
                                        {showTopThreeArrDets[key]
                                            .pinswg_appellantagent !=
                                            846040000 &&
                                            (showTopThreeArrDets[key]
                                                .pinswg_agentcompanyname !=
                                                null &&
                                                showTopThreeArrDets[key]
                                                    .pinswg_agentcompanyname +
                                                    ", ") +
                                                showTopThreeArrDets[key]
                                                    .pinswg_agentfirstname +
                                                " " +
                                                showTopThreeArrDets[key]
                                                    .pinswg_agentlastname}
                                    </div>
                                )}
                                {showTopThreeArrDets[key]
                                    .pinswg_appellantfirstname != null && (
                                    <div>
                                        <b>
                                            {t("myportal:on-behalf-of-label")}:{" "}
                                        </b>
                                        {showTopThreeArrDets[key]
                                            .pinswg_appellantfirstname +
                                            " " +
                                            showTopThreeArrDets[key]
                                                .pinswg_appellantlastname}
                                    </div>
                                )}
                                {router.locale == "cy"
                                    ? jsonpath(
                                          '$..[?(@.value=="' +
                                              showTopThreeArrDets[key][
                                                  "pinswg_lpaname"
                                              ] +
                                              '")].value_cy',
                                          transLookup
                                      )
                                    : showTopThreeArrDets[key][
                                          "pinswg_lpaname"
                                      ] || ""}
                                <div className="cardModuleReference">
                                    <b>{t("myportal:date-raised")}:</b>
                                    {"  "}
                                    {raisedDate(
                                        showTopThreeArrDets[key].createdon
                                    )}
                                </div>{" "}
                                {showTopThreeArr[key].hasOwnProperty(
                                    "appealComplete"
                                ) && (
                                    <div className="cardModuleReference">
                                        <b>
                                            {" "}
                                            {t(
                                                "myportal:submission-processing-label"
                                            )}
                                            .....
                                        </b>
                                    </div>
                                )}
                            </div>
                            {!showTopThreeArr[key].hasOwnProperty(
                                "appealComplete"
                            ) && (
                                <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]
                                                        .pinswg_name +
                                                    "?\n" +
                                                    t(
                                                        "case:do-you-want-to-delete-case-disclaimer-label"
                                                    )
                                            ) &&
                                                deleteCaseItem(
                                                    props.containerID,
                                                    showTopThreeArr[key]
                                                        .pinswg_name
                                                );
                                        }}
                                    >
                                        &mdash;
                                    </button>
                                </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"] > 3 && (
                    <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);