import Link from "next/link";
import _ from "lodash";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import { setCurrentReference } from "../../store/currentView/action";
import { connect } from "react-redux";
import { parseCookies } from "nookies";
import {
    getToken,
    getWatchedCasesProxy,
    getPortalModuleDetailsProxy,
    deleteWatchedCases,
} from "../../actions";

import {
    setWatchedCases,
    setWatchedCasesDetails,
} from "../../store/watchedCases/action";
import { getFormCollectionByID } from "../../components/utils";

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

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

    let topthreeRow = [];

    let showTopThreeArr = showTopThree.value;

    const deleteItem = (caseID, topThreeType) => {
        let token = getToken();
        let cookies = parseCookies();
        topThreeType == "watchedCases" &&
            deleteWatchedCases(caseID)
                .then((data) => data)
                .then(() => {
                    getWatchedCasesProxy(token, cookies.pinsUser).then(
                        (data) => {
                            setWatchedCases(data),
                                getDetails(token, data, "myWatchedCases").then(
                                    (data) => {
                                        setWatchedCasesDetails(data);
                                    }
                                );
                        }
                    );
                });
    };

    const getDetails = (token, resultsObj, detailsType) => {
        //console.log(resultsObj);
        let detailsArr = [];
        resultsObj = resultsObj.value;
        const detailsObj = resultsObj.map((searchDetail, index) => {
            if (searchDetail.pinswg_appealcasetype == null) {
                console.log(
                    detailsType != "myWatchedCases"
                        ? searchDetail.ticketnumber
                        : searchDetail[
                              "_pinswg_watchedcase_value@OData.Community.Display.V1.FormattedValue"
                          ]
                );
            } else {
                detailsArr.push(
                    getPortalModuleDetailsProxy(
                        token,
                        getFormCollectionByID(
                            searchDetail.pinswg_appealcasetype
                        ).LogicalCollectionName,
                        detailsType != "myWatchedCases"
                            ? searchDetail.ticketnumber
                            : searchDetail[
                                  "_pinswg_watchedcase_value@OData.Community.Display.V1.FormattedValue"
                              ]
                    )
                );
            }
        });
        //console.log(detailsArr);
        return Promise.all(detailsArr);
    };

    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>{" "}
                        <Link
                            href={
                                topThreeType == "awaitingSubmission"
                                    ? router.locale == "cy"
                                        ? "/fymhorth/cynrychiolaeth"
                                        : "/myportal/representation"
                                    : router.locale == "cy"
                                    ? "/fymhorth/achos"
                                    : "/myportal/case"
                            }
                        >
                            <a
                                className="govuk-link--no-underline"
                                data-id={index}
                                onClick={() => {
                                    setCurrentReference({
                                        "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":
                                            topThreeType != "watchedCases"
                                                ? topThreeType !=
                                                  "myRepresentations"
                                                    ? showTopThreeArr[key]
                                                          ._pinswg_case_value
                                                    : showTopThreeArr[key][
                                                          " _pinswg_watchedcase_value"
                                                      ]
                                                : showTopThreeArr[key][
                                                      " _pinswg_watchedcase_value"
                                                  ],

                                        "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"
                                      ]}
                            </a>
                        </Link>
                    </div>
                    {topThreeType != "awaitingSubmission" ? (
                        <div className="carModuleAddress">
                            <b>{t("myportal:case-address")}:</b>{" "}
                            {_.isEmpty(showDetails)
                                ? t("myportal:case-address-not-entered")
                                : _.isEmpty(showDetails[index])
                                ? t("myportal:case-address-not-entered")
                                : _.isEmpty(showDetails[index].value[0])
                                ? t("myportal:case-address-not-entered")
                                : _.isEmpty(
                                      showDetails[index].value[0]
                                          .pinswg_siteaddressline1
                                  )
                                ? t("myportal:case-address-not-entered")
                                : showDetails[index].value[0]
                                      .pinswg_siteaddressline1}
                        </div>
                    ) : (
                        ""
                    )}

                    {topThreeType == "awaitingSubmission" ? (
                        <div className="carModuleAddress">
                            Make Representation on Case Incomplete, not
                            submitted
                        </div>
                    ) : (
                        ""
                    )}
                </div>

                {topThreeType == "watchedCases" && (
                    <div className="">
                        <a
                            href="#"
                            className=" cardModuleRemoveCase govuk-link govuk-link--no-underline govuk-link--inverse "
                            onClick={() => {
                                event.preventDefault();
                                deleteItem(
                                    showTopThreeArr[key].pinswg_watchlistid,
                                    "watchedCases"
                                );
                                alert(
                                    "You have stopped watching case " +
                                        showTopThreeArr[key][
                                            "_pinswg_watchedcase_value@OData.Community.Display.V1.FormattedValue"
                                        ]
                                );
                            }}
                        >
                            &mdash;
                        </a>
                    </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));
        },
    };
};

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