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

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

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

    let topthreeRow = [];

    for (var i = 0; i < 3; i++) {
        (function (i) {
            topthreeRow.push(
                <div className="cardModuleItem" key={i}>
                    <div className="cardModuleDetails">
                        <div className="cardModuleReference">
                            <b>Case reference:</b>{" "}
                            <Link
                                href={
                                    topThreeType == "awaitingSubmission"
                                        ? "/representation"
                                        : "/case"
                                }
                            >
                                <a
                                    data-id={i}
                                    onClick={() => {
                                        setCurrentReference({
                                            "currentReference":
                                                showTopThree.value[i]
                                                    .ticketnumber,
                                            "currentType": topThreeType,
                                        });
                                    }}
                                >
                                    {showTopThree.value[i].ticketnumber}
                                </a>
                            </Link>
                        </div>
                        {topThreeType != "awaitingSubmission" ? (
                            <div className="carModuleAddress">
                                <b>Address: </b>
                                {showTopThree.value[i].address1}
                            </div>
                        ) : (
                            ""
                        )}

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

    return <>{topthreeRow}</>;
};

const mapDispatchToProps = (dispatch) => {
    return {
        setCurrentReference: (currentReference) => {
            dispatch(setCurrentReference(currentReference));
        },
    };
};

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