"use client";

import Container from "@/components/elements/Container";
import PageTitle from "@/components/settings/PageTitle";
import { editUserNavLinks } from "@/constants";
import LocalePageShell from "@/components/i18n/LocalePageShell";
import { useUser } from "@/hooks/useUser";
import Image from "next/image";
import Link from "next/link";
import React, { useEffect, useState } from "react";
import UserDetails from "@/components/settings/UserDetails";
import AccountAnalyticsWidget from "@/components/settings/AccountAnalyticsWidget";
import { staticIconUrl } from "@/components/main/BaseUrl";
import { useTranslation } from "react-i18next";

const EDIT_NAV_KEY: Record<string, string> = {
  "/username": "username",
  "/password": "password",
  "/google-account": "googleAccount",
  "/instagram-import": "instagramImport",
  "/two-factor": "twoFactor",
  "/avatar": "avatar",
  "/Authentication": "authentication",
  "/expertise": "expertise",
  "/colors": "colors",
  "/services": "services",
  "/sizes": "sizes",
  "/License": "license",
  "/cooperation-type": "cooperationType",
  "/public-relations": "publicRelations",
  "/shaba": "shaba",
  "/location": "location",
  "/blocked-users": "blockedUsers",
  "/archive": "archive",
  "/activity": "activity",
};

function EditPage() {
  const { t } = useTranslation("common");
  const user = useUser();
  const [isRegister, setIsRegister] = useState<string | undefined>("false");

  useEffect(() => {
    setIsRegister(user?.is_Register);
  }, [user]);

  return (
    <LocalePageShell>
      <Container>
        <PageTitle>{t("settings.nav.edit")}</PageTitle>
        <div>
          <UserDetails />
          <AccountAnalyticsWidget />
          <div className="my-10 flex flex-col gap-5 text-sm font-semibold md:gap-8">
            {editUserNavLinks?.map((item) => (
              <Link
                className={`flex items-center gap-2 ${
                  item.href === "/License" && isRegister === "false"
                    ? "hidden"
                    : ""
                }`}
                key={item.href}
                href={`/settings/edit${item.href}`}
              >
                <Image
                  width={24}
                  height={24}
                  alt={t(`settings.edit.nav.${EDIT_NAV_KEY[item.href]}`)}
                  src={staticIconUrl(`/images/icons/${item.icon}`)}
                  unoptimized
                  className="shrink-0 dark:invert"
                />
                <span className="whitespace-nowrap">
                  {t(`settings.edit.nav.${EDIT_NAV_KEY[item.href]}`)}
                </span>
              </Link>
            ))}
          </div>
        </div>
      </Container>
    </LocalePageShell>
  );
}

export default EditPage;
