"use client";

import { useTranslation } from "react-i18next";
import { useState } from "react";
import i18n from "@/i18n";
import { Link } from "react-scroll";
import Text from "../text";
import "./navbar.css";
import { logoImg } from "@/assets";
import Image from "next/image";

export default function Navbar() {
  // Togle variable
  const [toggle, setToggle] = useState(false);
  const [togglerIcon, setTogglerIcon] = useState("toggler");
  const [lang, setLang] = useState<"uz" | "ru">("uz");

  const handleChangeLang = (lng: "uz" | "ru") => {
    setLang(lng);
    i18n.changeLanguage(lng);
  };

  // change active toggler
  const changeToggler = () => {
    // for show up responsive navbar
    setToggle(!toggle);

    // animation class for toggle icon
    togglerIcon === "toggler"
      ? setTogglerIcon("toggler toggle")
      : setTogglerIcon("toggler");
  };

  return (
    <div
      className={`w-[100%] bg-white  border-gray shadow-md shadow-gray-500 z-[1000] top-0`}
    >
      <div className="container max-w-[1500px] w-full px-[10px] mx-auto items-center justify-between ">
        <div
          className={`w-full flex justify-between items-center pb-[10px] pt-[10px]`}
        >
          <div className=" min-[580px]:flex hidden items-center justify-center gap-5">
            <button
              onClick={() => handleChangeLang("uz")}
              className={`hover:cursor-pointer ${
                lang === "uz" && "bg-secondary text-primary rounded-[8px]"
              } px-2 py-1 text-[20px] ${
                lang !== "uz" && "border-l-2 border-b-2 border-primary"
              } `}
            >
              UZ
            </button>
            <button
              onClick={() => handleChangeLang("ru")}
              className={`hover:cursor-pointer ${
                lang === "ru" && "bg-secondary text-primary rounded-[8px]"
              } px-2 py-1 text-[20px]  ${
                lang !== "ru" && "border-r-2 border-b-2 border-primary"
              }`}
            >
              RU
            </button>
          </div>
          <div
            className={`lg:w-auto flex justify-around items-center lg:gap-[10px] gap-[5px]`}
          >
            <div className="nav_link_group  bg-white flex items-center lg:gap-[20px] gap-[10px]">
              <LinkGroup togle_func={changeToggler} />
            </div>

            {/* change language part */}
            <div className=" max-[580px]:flex hidden items-center justify-center gap-5">
            <button
              onClick={() => handleChangeLang("uz")}
              className={`hover:cursor-pointer ${
                lang === "uz" && "bg-secondary text-primary rounded-[8px]"
              } px-2 py-1 text-[20px] ${
                lang !== "uz" && "border-l-2 border-b-2 border-primary"
              } `}
            >
              UZ
            </button>
            <button
              onClick={() => handleChangeLang("ru")}
              className={`hover:cursor-pointer ${
                lang === "ru" && "bg-secondary text-primary rounded-[8px]"
              } px-2 py-1 text-[20px]  ${
                lang !== "ru" && "border-r-2 border-b-2 border-primary"
              }`}
            >
              RU
            </button>
          </div>

            <div onClick={changeToggler} className={togglerIcon}>
              <div className="toggle_item1"></div>
              <div className="toggle_item2"></div>
              <div className="toggle_item3"></div>
            </div>

            <div
              className={
                toggle ? "nav_link_group_phone active" : "nav_link_group_phone"
              }
            >
              <div onClick={changeToggler} className={`${togglerIcon}`}>
                <div className="toggle_item1"></div>
                <div className="toggle_item2"></div>
                <div className="toggle_item3"></div>
              </div>
              <div className=" flex flex-col gap-[20px] items-end justify-end w-full ">
                <LinkGroup togle_func={changeToggler} />
              </div>
            </div>
          </div>
          <Link to="/" smooth={true} duration={500} offset={-200}>
            <div className="flex items-center justify-center gap-2">
              <span className="max-[770px]:hidden flex text-2xl font-bold">
                SPES-TEXNIKA
              </span>
              <Image
                src={logoImg}
                alt="logo"
                className="logo_img"
                width={100}
                height={100}
                priority
              />
            </div>
          </Link>
        </div>
      </div>
      <div
        onClick={changeToggler}
        className={toggle ? "overflow active" : "overflow"}
      ></div>
    </div>
  );
}

function LinkGroup({ togle_func }: { togle_func: () => void }) {
  return (
    <>
      <Link
        to="service"
        smooth={true}
        duration={500}
        offset={-200}
        onClick={togle_func}
        className={`lg:text-[25px] md:text-[18px] max-[580px]:border-b-2 w-full text-left pl-2 text-[20px] hover:cursor-pointer text-primary hover:text-secondary`}
      >
        <Text txt="contact" />
      </Link>
      <Link
        to="about"
        smooth={true}
        duration={500}
        offset={-200}
        onClick={togle_func}
        className={`lg:text-[25px] md:text-[18px] max-[580px]:border-b-2 w-full text-left pl-2 text-[20px] hover:cursor-pointer text-primary hover:text-secondary`}
      >
        <Text txt="news" />
      </Link>

      <Link
        to="products"
        smooth={true}
        duration={500}
        offset={-200}
        onClick={togle_func}
        className={`lg:text-[25px] md:text-[18px] max-[580px]:border-b-2 w-full text-left pl-2 text-[20px] hover:cursor-pointer text-primary hover:text-secondary`}
      >
        <Text txt="products" />
      </Link>
    </>
  );
}