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 } from "../../store/currentView/action";

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

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

    let topthreeRow = [];
    let showTopThreeArr = props.awaitingSubmissionFromBlob.value;

    let topThreeOnlyArr = showTopThreeArr;
    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[index].pinswg_name}
                    </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>
                </div>
            </div>
        );
    });

    return (
        <div className="card" id="casescomment-card">
            <div className="card-body">
                <h3 className="heading-small card-heading">
                    {t("myportal:awatitingsubmission-card-title")}
                </h3>
                <div className="cardModuleContainer">
                    {topthreeRow}
                    {/* <TopThree
                        showTopThree={props.awaitingSubmissionFromBlob}
                        showDetails={props.awaitingSubmissionFromBlob}
                        topThreeType={"awaitingSubmissionFromBlob"}
                    /> */}
                </div>
                {props.awaitingSubmissionFromBlob["@odata.count"] > 3 && (
                    <div className="cardVieAll">
                        <Link href="/myportal/viewall">
                            <a
                                className="govuk-link--no-underline"
                                onClick={() => {
                                    setCurrentView({
                                        "viewName": "Awaiting Submission",
                                        "viewKey": "awaitingSubmission",
                                    });
                                }}
                            >
                                {t("myportal:viewall-link")}
                            </a>
                        </Link>
                    </div>
                )}
            </div>
        </div>
    );
};

const mapDispatchToProps = (dispatch) => {
    return {
        setCurrentView: (currentView) => {
            dispatch(setCurrentView(currentView));
        },
    };
};

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