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";

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

    let topThreeOnlyArr = showTopThreeArr.slice(0, 3);
    //console.log(showTopThreeArr);
    Object.keys(topThreeOnlyArr).map((key, index) => {
        //console.log(key, showTopThreeArr[key].pinswg_appealcasetype);
        //console.log("subsssss:", showTopThreeArr[key]);
        let urlname = getFormCollectionByID(
            showTopThreeArr[key].pinswg_appealcasetype
        ).UrlName;

        topthreeRowArr.push(
            <>
                <div className="cardModuleItem" key={index}>
                    <div className="cardModuleDetails">
                        <div className="cardModuleReference">
                            <b>{t("myportal:temp-reference")}:</b>

                            <Link
                                key={"link" + index}
                                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>LPA reference:</b>{" "}
                            {
                                showTopThreeArr[key]
                                    .pinswg_lpaapplicationreference
                            }
                        </div>
                        <div>
                            <b>{t("myportal:appeal-type-label")}:</b>{" "}
                            {
                                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>{" "}
                    </div>
                    <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>
            </>
        );
    });

    const TopThreeRow = () => {
        return (
            <div
                className="cardModuleContainer"
                key={"cttr_" + Math.floor(Math.random() * 5)}
            >
                {topthreeRowArr}
            </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 key={"ttr_" + Math.floor(Math.random() * 5)} />
                {/* <TopThree
                        showTopThree={props.awaitingSubmissionFromBlob}
                        showDetails={props.awaitingSubmissionFromBlob}
                        topThreeType={"awaitingSubmissionFromBlob"}
                    /> */}

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

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