import Link from "next/link";
import { useRouter } from "next/router";
import { useContext } from "react";
import useTranslation from "next-translate/useTranslation";
import MakeNewAppeal from "./myportal/makenewappeal";
import MyCases from "./myportal/mycases";
import SearchCases from "./myportal/searchcases";
import AwaitingSubmission from "./myportal/awaitingsubmission";
import MyRepresentations from "./myportal/myrepresentations";
import WatchedCases from "./myportal/watchedcases";
import YourAccount from "./myportal/youraccount";

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

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

    return (
        <main className="" id="main-content" role="main">
            <div className="servicebanner govuk-!-margin-bottom-4">
                <h1>
                    <img
                        src={
                            router.locale == "cy"
                                ? "/assets/images/my-portal-cy.svg"
                                : "/assets/images/my-portal-en.svg"
                        }
                        alt={router.locale == "cy" ? "Fy mhorth" : "My Portal"}
                    />
                    <img
                        className="pedw_logo"
                        src="/assets/images/pedw_logo.png"
                        alt={
                            router.locale == "cy"
                                ? "Penderfyniadau Cynllunio ac Amgylchedd Cymru"
                                : "Planning & Environment Decisions Wales"
                        }
                    />
                </h1>
            </div>
            <div className="govuk-grid-row">
                <div className="govuk-grid-column-full">
                    <div className="flex-container grid-row govuk-body ">
                        <MakeNewAppeal />
                        <MyCases myCases={props.myCases} />
                        <SearchCases />
                        <AwaitingSubmission
                            awaitingSubmission={props.awaitingSubmission}
                        />
                        <MyRepresentations
                            myRepresentations={props.myRepresentations}
                        />
                        <WatchedCases watchedCases={props.watchedCases} />
                    </div>
                    <div className="flex-container grid-row govuk-body ">
                        <YourAccount />
                    </div>
                </div>
            </div>
        </main>
    );
};

export default MyPortal;