import { signOut } from "next-auth/react";
import useTranslation from "next-translate/useTranslation";
import Link from "next/link";
import { useRouter } from "next/router";
import { destroyCookie } from "nookies";
import TimeOut from "../components/timeout";
import AwaitingSubmission from "./myportal/awaitingsubmission";
import AwaitingSubmissionFromBlob from "./myportal/awaitingsubmissionfromblob";

import Dns from "./myportal/dns";
import MakeNewAppeal from "./myportal/makenewappeal";
import MyCases from "./myportal/mycases";
import MyRepresentations from "./myportal/myrepresentations";
import SearchCases from "./myportal/searchcases";
import UploadFile from "./myportal/uploadFile";
import WatchedCases from "./myportal/watchedcases";

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

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

    const handleLogout = () => {
        console.info("////////////\n" + "logout" + "\n////////////");
        window.localStorage.clear(),
            destroyCookie(null, "next-auth.csrf-token"),
            destroyCookie(null, "next-auth.callback-url"),
            destroyCookie(null, "pedw_locale"),
            destroyCookie(null, "pinsUser"),
            signOut({ callbackUrl: "/logout" });
    };

    const isLPA =
        props.accountDetails.accountDetails[
            "pinswg_typeofinvolvement@OData.Community.Display.V1.FormattedValue"
        ] == "LPA"
            ? true
            : false;

    return <>
        <main className="" id="main-content" role="main">
            <div className="servicebanner myportal govuk-!-margin-bottom-4">
                <h1>
                    <img
                        src={
                            router.locale == "cy"
                                ? "/assets/images/planning-casework-cy.svg"
                                : "/assets/images/planning-casework-en.svg"
                        }
                        alt={
                            router.locale == "cy"
                                ? "Fy mhorth"
                                : "My Portal"
                        }
                    />
                </h1>

                <div className="serviceBanner_userDetails">
                    <img
                        className="user_logo"
                        src="/assets/images/user.svg"
                        alt={router.locale == "cy" ? "Defnyddiwr" : "User"}
                    />{" "}
                    <div className="serviceBanner_userDetails_name">
                        <Link href="/account/personaldetails" className="govuk-button-secondary">

                            {
                                props.accountDetails.accountDetails
                                    .firstname
                            }{" "}
                            {
                                props.accountDetails.accountDetails
                                    .lastname
                            }
                            {" - "}
                            {
                                props.accountDetails.accountDetails[
                                    "pinswg_typeofinvolvement@OData.Community.Display.V1.FormattedValue"
                                ]
                            }

                        </Link>
                    </div>
                    <div>
                        <Link
                            href={
                                router.locale == "cy"
                                    ? "/allgofnodi"
                                    : "/logout"
                            }
                            onClick={() => {
                                handleLogout();
                            }}
                            className="govuk-header__link govuk-!-margin-right-3">

                            {t("common:signout-label")}

                        </Link>
                    </div>
                </div>
            </div>
            {isLPA && (
                <div>
                    <h2 className="heading-small card-heading">
                        {
                            props.accountDetails.accountDetails[
                                "pinswg_contact_associatedlpa@OData.Community.Display.V1.FormattedValue"
                            ]
                        }{" "}
                        LPA Portal
                    </h2>
                </div>
            )}
            <div className="govuk-grid-row">
                <div className="govuk-grid-column-full">
                    <div className="flex-container grid-row govuk-body ">
                        {!isLPA && <MakeNewAppeal />}
                        <SearchCases />
                        {/* {props.awaitingSubmission.awaitingSubmission[
                            "@odata.count"
                        ] > 0 && (
                            <AwaitingSubmission
                                awaitingSubmission={
                                    props.awaitingSubmission
                                }
                            />
                        )} */}
                        {isLPA
                            ? ""
                            : props.awaitingSubmission
                                  .awaitingSubmissionFromBlob[
                                  "@odata.count"
                              ] > 0 && (
                                  <AwaitingSubmissionFromBlob
                                      containerID={props.containerID}
                                      awaitingSubmissionFromBlob={
                                          props.awaitingSubmission
                                              .awaitingSubmissionFromBlob
                                      }
                                  />
                              )}
                        {props.myCases.myCases["@odata.count"] > 0 && (
                            <MyCases
                                myCases={props.myCases}
                                isLPA={isLPA}
                            />
                        )}
                        {props.watchedCases.watchedCases["@odata.count"] >
                            0 && (
                            <WatchedCases
                                watchedCases={props.watchedCases}
                                isLPA={isLPA}
                            />
                        )}
                        {props.myRepresentations.myRepresentations[
                            "@odata.count"
                        ] > 0 && (
                            <MyRepresentations
                                myRepresentations={props.myRepresentations}
                                isLPA={isLPA}
                            />
                        )}
                        {!isLPA && <Dns />}

                        {/* <YourAccount /> */}
                    </div>
                </div>
            </div>
        </main>
        <TimeOut />
    </>;
};

export default MyPortal;