import useTranslation from "next-translate/useTranslation";
import Link from "next/link";
import { useRouter } from "next/router";
import { connect } from "react-redux";
import { setCurrentView } from "../../store/currentView/action";
import TopThree from "./topthree";

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

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

    let recordCountVar = props.watchedCases.watchedCases;

    return (
        <div className="card" id="my-watched-cases-card">
            <div className="card-body">
                <h3 className="heading-small card-heading">
                    {props.myReps
                        ? t("myportal:submitted-reps-card-title")
                        : t("myportal:watchedcases-card-title")}
                </h3>
                <div className="cardModuleContainer">
                    <TopThree
                        showTopThree={props.watchedCases.watchedCases}
                        showDetails={props.watchedCases.watchedCasesDetails}
                        topThreeType={"watchedCases"}
                        showLoginCheck={props.showLoginCheck}
                        currentView={props.currentView}
                        myReps={props.myReps}
                        props={props}
                    />
                </div>

                {(props.myReps
                    ? recordCountVar.length > 3
                    : recordCountVar["@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": "Watched Cases",
                                    "viewKey": "watchedCases",
                                });
                            }}
                        >
                            {/* {t("myportal:viewall-link")}{" "}
                            {props.watchedCases.watchedCases["@odata.count"] +
                                " cases"} */}
                            {t("myportal:viewall-link-count", {
                                count: props.watchedCases.watchedCases[
                                    "@odata.count"
                                ],
                            })}
                        </Link>
                    </div>
                )}
            </div>
        </div>
    );
};

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

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