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">
                                <a className="govuk-button-secondary">
                                    {
                                        props.accountDetails.accountDetails
                                            .firstname
                                    }{" "}
                                    {
                                        props.accountDetails.accountDetails
                                            .lastname
                                    }
                                    {" - "}
                                    {
                                        props.accountDetails.accountDetails[
                                            "pinswg_typeofinvolvement@OData.Community.Display.V1.FormattedValue"
                                        ]
                                    }
                                </a>
                            </Link>
                        </div>
                        <div>
                            <Link
                                href={
                                    router.locale == "cy"
                                        ? "/allgofnodi"
                                        : "/logout"
                                }
                            >
                                <a
                                    onClick={() => {
                                        handleLogout();
                                    }}
                                    className="govuk-header__link govuk-!-margin-right-3"
                                >
                                    {t("common:signout-label")}
                                </a>
                            </Link>
                        </div>
                    </div>
                </div>
                {isLPA == true ? (
                    <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} />
                            )}
                            {props.watchedCases.watchedCases["@odata.count"] >
                                0 && (
                                <WatchedCases
                                    watchedCases={props.watchedCases}
                                />
                            )}
                            {isLPA
                                ? ""
                                : props.myRepresentations.myRepresentations[
                                      "@odata.count"
                                  ] > 0 && (
                                      <MyRepresentations
                                          myRepresentations={
                                              props.myRepresentations
                                          }
                                      />
                                  )}
                            {isLPA ? "" : <Dns />}

                            {/* <YourAccount /> */}
                            {showFileUpload == "true" && <UploadFile />}
                        </div>
                    </div>
                </div>
            </main>
            <TimeOut />
        </>
    );
};

export default MyPortal;