"use client";

import Avatar from "boring-avatars";
import { useRouter } from "next/navigation";
import React, { useContext } from "react";
import { useLongPress } from "@uidotdev/usehooks";
import { toast } from "react-toastify";
import AppContext from "@ctx/AppContext";
import notifIcon from "@img/notif.png";
import Image from "next/image";
import { useLocale, useTranslations } from "next-intl";
import { Link } from "src/i18n/routing";

const AppHeader = ({
  title,
  sub,
  icon1,
  iconName1,
  iconHref1,
  iconEvent1,
  icon2,
  iconName2,
  iconHref2,
  iconEvent2,
  iconName3,
  iconEvent3,
  userIcon,
  userIconData,
  userIconHref,
  userRole,
  logOut,
  notif,
}) => {
  const router = useRouter();
  const CTX = useContext(AppContext);
  const notifUnreadData = CTX.state.notifUnreadData;

  const t = useTranslations("login");
  const t2 = useTranslations("extra");
  const locale = useLocale();
  const isRTL = locale === "fa";

  const handlelogOut = () => {
    CTX.setStepLogin(0);
    localStorage.removeItem("token");

    router.push(
      locale === "zh"
        ? "/zh/app/login"
        : locale === "fa"
        ? "/fa/app/login"
        : "/app/login"
    );
  };

  const attrs = useLongPress(() => handlelogOut(), {
    // onStart: (event) => setSubButtonAction(true),
    onFinish: (event) => {
      handlelogOut();
    },
    // onCancel: (event) => setSubButtonAction(false),
    threshold: 1000,
  });

  const icons = [
    {
      iconName: "ACOUNT",
      icon: (
        <svg
          width="30"
          height="30"
          viewBox="0 0 300 300"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          className="mx-auto pt-[2px] ml-[6px]"
        >
          <path
            d="M150 46.875C137.561 46.8085 125.362 50.3045 114.846 56.9497C104.33 63.5948 95.9362 73.1115 90.6563 84.375H90L88.6031 89.2781C87.978 90.9421 87.4213 92.631 86.9344 94.3406C86.8781 94.5281 86.7937 94.6968 86.7375 94.8843L52.5 67.5L41.25 82.5093L66.5625 103.125H37.5V121.875H84.9937C85.3875 124.866 86.0063 127.781 86.9063 130.575C87.3938 132.328 87.975 134.034 88.6031 135.722L90 140.625H90.6563C95.6277 151.292 103.405 160.408 113.156 166.997C79.7812 181.369 56.25 214.612 56.25 253.125H75C75 211.875 108.75 178.125 150 178.125C191.25 178.125 225 211.875 225 253.125H243.75C243.75 214.622 220.219 181.359 186.844 166.969C196.59 160.386 204.366 151.281 209.344 140.625H210L210.281 138.666C213.713 130.669 215.625 121.837 215.625 112.5C215.625 75.9375 186.563 46.875 150 46.875ZM150 65.625C157.287 65.5852 164.48 67.2619 170.999 70.5193C177.517 73.7768 183.176 78.5235 187.519 84.375H112.481C116.824 78.5235 122.483 73.7768 129.001 70.5193C135.52 67.2619 142.713 65.5852 150 65.625ZM104.063 103.125H195.937C196.031 103.416 196.031 103.781 196.106 104.1C196.575 106.819 196.875 109.622 196.875 112.5C196.875 115.378 196.584 118.181 196.106 120.9C196.031 121.209 196.041 121.584 195.937 121.875H104.063C103.969 121.584 103.969 121.219 103.894 120.9C103.398 118.127 103.141 115.317 103.125 112.5C103.125 109.622 103.416 106.819 103.894 104.1C103.969 103.791 103.959 103.416 104.063 103.125ZM112.481 140.625H187.519C183.176 146.476 177.517 151.223 170.999 154.481C164.48 157.738 157.287 159.415 150 159.375C142.713 159.415 135.52 157.738 129.001 154.481C122.483 151.223 116.824 146.476 112.481 140.625Z"
            fill="#DA4215"
          />
        </svg>
      ),
    },
    {
      iconName: "NINJA",
      icon: (
        <svg
          width="27"
          height="27"
          viewBox="0 0 300 300"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          className="mx-auto pt-[2px] ml-2"
        >
          <path
            d="M268.916 9.90332C256.476 36.5699 232.473 17.9383 213.316 17.2885C159.138 16.8197 157.503 45.0338 130.526 62.4156C125.141 56.5445 116.596 52.818 103.14 53.558C93.8072 54.0713 85.3609 57.2729 79.1318 62.8715C71.9014 69.1633 66.6309 77.8416 66.2752 86.2152C78.5975 83.1004 90.4768 83.6459 93.1527 89.4145C99.8957 103.953 80.6313 98.7666 66.935 103.124C66.2037 103.356 65.4865 103.598 64.7764 103.841C63.1609 108.372 61.2467 112.707 61.2467 115.843C61.2467 125.771 69.2658 119.452 72.7592 128.077C73.2572 129.307 74.9729 133.131 79.9299 137.94C80.7309 138.718 106.883 117.365 107.754 118.077C99.0619 136.592 85.0275 143.12 83.6564 143.843C71.2129 150.407 56.2779 155.808 51.025 166.185L50.7191 166.087C50.7191 166.087 34.559 204.422 31.085 223.455C31.4219 233.267 46.1271 230.805 46.1271 230.805L69.2875 223.9L72.0332 233.826L142.042 145.568C126.736 136.386 131.469 122.958 129.194 111.128C137.273 97.9586 142.026 91.1693 137.747 77.9166C141.92 73.6287 147.249 69.2535 153.339 68.0852C165.8 65.6945 188.505 77.5762 200.798 77.7355C217.076 77.9477 225.827 69.359 232.645 59.0412C226.396 61.0932 224.025 61.092 227.546 50.2141C219.239 53.2463 213.885 63.4562 198.836 61.0691C184.85 58.8502 163.635 54.6115 151.923 58.518C171.801 48.3092 187.4 37.8619 208.628 35.3951C233.503 37.1682 255.831 54.6818 268.915 25.416L268.916 9.90332ZM199.318 90.1053L176.465 118.854L186.156 125.717L209.012 96.9672L199.318 90.1053ZM78.9027 91.0762C75.7955 91.0762 72.6877 91.7764 72.6877 93.1762C73.9551 94.9006 78.4229 96.3033 80.5738 96.352C84.0062 96.352 85.1178 95.9746 85.1178 93.1762C85.1178 91.7764 82.01 91.0762 78.9027 91.0762ZM161.44 118.707L154.584 127.011L183.34 146.982L190.196 138.678L161.44 118.707ZM158.849 139.791L58.9305 265.752C58.9305 265.752 52.9264 270.689 58.9012 275.58C65.0359 280.602 69.8125 273.439 69.8125 273.439L169.729 147.477L158.849 139.791ZM169.942 164.35C169.942 164.35 157.82 180.079 151.649 187.858C126.953 218.982 77.9857 279.673 76.6826 280.527L76.7225 290.097H140.766L149.769 222.559L175.938 228.229C175.938 228.229 186.435 229.351 186.007 220.13C183.297 207.375 174.742 176.264 169.942 164.35ZM156.633 192.987L161.757 205.649L153.265 203.464L156.633 192.987Z"
            fill="#004E1F"
          />
        </svg>
      ),
    },

    {
      iconName: "ARROW",
      icon: (
        <svg
          width="20"
          height="20"
          viewBox="0 0 11 18"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          className={`mx-auto mt-[7px] ${isRTL ? "" : "rotate-180"}`}
        >
          <path d="M10 1L2 9L10 17" stroke="#555555" stroke-width="2" />
        </svg>
      ),
    },

    {
      iconName: "PLUS",
      icon: (
        <svg
          width="20"
          height="20"
          viewBox="0 0 16 16"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          className="mx-auto mt-[6px] opacity-70"
        >
          <path
            d="M8 1V15M1 8H15"
            stroke="#2B2B2B"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      ),
    },
  ];

  // ;

  return (
    <div
      className={`bg-white flex justify-between rtl pt-4 px-4  w-full ${
        isRTL ? "rtl" : "ltr"
      }`}
    >
      <Link href={"/app/acount"}>
        <div className="flex">
          {userIcon && (
            <div className="w-[50px] h-[50px] rounded-full bg-white border-[5px]">
              <div className=" rounded-full  z-10 ">
                <Avatar
                  size={40}
                  name={userIconData}
                  variant="beam"
                  colors={["#9d9f88", "#83af96", "#b2de93"]}
                />
              </div>
            </div>
          )}
          <div className="mx-2 mt-1">
            <h2 className="mb-0 text-black font-bold text-base">{title}</h2>
            <p className="mb-0 text-black text-sm">{sub}</p>
          </div>
        </div>
      </Link>

      {!userRole ? (
        <div className="flex mt-2">
          {logOut && (
            <div
              {...attrs}
              className="w-fit h-fit bg-red-500 text-white rounded-full mx-1 mt-[5px]   "
              onClick={() => {
                toast.error(`برای خروج نگه دارید`, {
                  position: "bottom-right",
                  closeOnClick: true,
                });
              }}
            >
              <p className="mb-0 p-1 px-4 text-sm">{t2("exit")}</p>
            </div>
          )}
          {icon1 ? (
            <Link href={iconHref1}>
              <div
                className="w-[40px] h-[40px] bg-white rounded-full mx-1 pt-[3px]"
                onClick={iconEvent1}
              >
                {icons.find((e) => e.iconName == iconName1)?.icon}
              </div>
            </Link>
          ) : (
            ""
          )}

          {icon2 ? (
            <Link href={iconHref2}>
              <div
                className="w-[40px] h-[40px] bg-white rounded-full mx-1 pt-[3px]"
                onClick={iconEvent2}
              >
                {icons.find((e) => e.iconName == iconName2)?.icon}
              </div>
            </Link>
          ) : (
            ""
          )}

          {notif && (
            <Link href={"/app/news"} className="ml-5">
              {notifUnreadData > 0 && (
                <div className={`absolute ${isRTL ? "" : "ml-[13px]"}`}>
                  <div className="w-3 h-3 rounded-full bg-red-300 border-2 border-black"></div>
                </div>
              )}

              <Image src={notifIcon} className="w-[25px]" />
            </Link>
          )}
        </div>
      ) : (
        <div
          className="w-fit h-fit bg-gray-100 rounded-full mx-1 mt-2   "
          onClick={iconEvent3}
        >
          <p className="mb-0 p-2 px-4 text-sm">{iconName3}</p>
        </div>
      )}
    </div>
  );
};

export default AppHeader;