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 {
    setAwaitingSubmission,
    setAwaitingSubmissionDetails,
} from "../../store/awaitingSubmission/action";
import { setCurrentReference } from "../../store/currentView/action";
import {
    setWatchedCases,
    setWatchedCasesDetails,
} from "../../store/watchedCases/action";
import { getFormCollectionByID } from "../utils";

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

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

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

    Object.keys(showTopThreeArr).map((key, index) => {
        let createdDate = parseInt(
            showTopThreeArr[key].repfile_name.split("-")[3]
        );
        showTopThreeArr[key].createdDate = createdDate;
    });

    showTopThreeArr.sort(function compare(a, b) {
        console.log(a.createdDate, b.createdDate);
        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),
                            getDetails(data, "myWatchedCases").then((data) => {
                                setWatchedCasesDetails(data);
                            });
                    });
                });

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

    const getDetails = (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(
                        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);
    };

    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 dateObj = new Date(parseInt(datePart.split("-")[3]));
        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>{" "}
                        <Link
                            // href="#"
                            href={{
                                pathname: "/myportal/representation",
                                query: {
                                    case: showTopThreeArr[key].caseRef,
                                    state: "edit",
                                },
                            }}
                            className="govuk-link--no-underline"
                            data-id={index}
                            onClick={() => {
                                setCurrentReference({
                                    "currentReference":
                                        showTopThreeArr[key].caseRef,
                                    "currentType": topThreeType,
                                    "incidentid":
                                        showTopThreeArr[key].incidentID,
                                    "appealType":
                                        showTopThreeArr[key].appealType,
                                    "repDetails": showTopThreeArr[key],
                                });
                            }}>

                            {showTopThreeArr[key].pinswg_name}

                        </Link>
                    </div>
                    <div className="cardModuleReference">
                        <b>{t("myportal:representation-type")}:</b>
                        {"  "}
                        {showTopThreeArr[key].representationType}
                    </div>
                    <div className="cardModuleReference">
                        <b>{t("myportal:capacity")}:</b>
                        {"  "}
                        {showTopThreeArr[key].representationCapacity}
                    </div>
                    <div className="cardModuleReference">
                        <b>{t("myportal:date-raised")}:</b>
                        {"  "}
                        {repRaisedDate(showTopThreeArr[key].repfile_name)}
                    </div>{" "}
                    <div className="cardModuleReference">
                        <b>lpa:</b>
                        {"  "}
                        {repRaisedDate(showTopThreeArr[key].repfile_name)}
                    </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 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));
        },
    };
};

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