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 MyCases = (props) => {
    let { t } = useTranslation();

    const router = useRouter();
    const { locale } = router;
    const { setCurrentView } = props;
    return (
        <div className="card card-3" id="casescomment-card">
            <div className="card-body">
                <h3 className="heading-small card-heading">
                    {t("myportal:mycases-card-title")}
                </h3>
                <div className="cardModuleContainer">
                    <TopThree
                        showTopThree={props.myCases.myCases}
                        showDetails={props.myCases.myCasesDetails}
                        topThreeType={"myCases"}
                    />
                </div>

                <div className="cardVieAll">
                    <Link href="/myportal/viewall" shallow>
                        <a
                            onClick={() => {
                                setCurrentView({
                                    "viewName": "My Cases",
                                    "viewKey": "myCases",
                                });
                            }}
                        >
                            {t("myportal:viewall-link")}
                        </a>
                    </Link>
                </div>
            </div>
        </div>
    );
};

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

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