"use client";

import {
  Badge,
  IconButton,
  Navbar,
  Typography,
} from "@material-tailwind/react";
import { FaBarsStaggered } from "react-icons/fa6";
import { HiOutlineShoppingCart } from "react-icons/hi";

import { _useScopedI18n } from "../i18n/client";
import { IUserProfile } from "../types/user";
import { BrandIcon } from "./icons/BrandIcon";
import ProfileMenu from "./ProfileMenu";
import ServerTime from "./ServerTime";

export type HeaderProps = {
  onMenuClick: () => void;
  openCartDrawer: () => void;
  logout: () => void;
  user: IUserProfile;
  cartProductsCount: number;
};

export function Header({
  user,
  logout,
  onMenuClick,
  openCartDrawer,
  cartProductsCount,
}: HeaderProps) {
  //
  const scopeT = _useScopedI18n("sharedComponents.headerComponent");

  return (
    <>
      <Navbar className="rounded-none px-2 py-3 md:p-3 w-full shadow-none  border-b-slate-50 max-w-full">
        <div className="flex relative items-center justify-start gap-5 md:justify-between text-blue-gray-900">
          <div className="flex-1">
            <div className="hidden lg:block">
              <Typography className="text-base font-semibold text-black-500 mb-[0.3rem]">
                {scopeT("title")}, {user?.userName}
              </Typography>
              {/* 
                                <Typography className="text-xs font-normal text-black-300">
                                    lorem Ipsum text lorem Ipsum text text
                                </Typography> 
                            */}
            </div>

            <a href="/products" className="lg:hidden">
              <div className="w-36 brandIcon">
                <BrandIcon width={150} height={34} />
              </div>
            </a>
          </div>

          <div className="flex justify-between items-center gap-5">
            <ServerTime className="hidden md:flex" />

            <div className="flex items-center">
              {(() => {
                const button = (
                  <IconButton
                    onClick={openCartDrawer}
                    className="bg-gray-50 rounded-full h-10 w-10 !max-h-10 !max-w-10 shadow-none border border-slate-50"
                  >
                    <HiOutlineShoppingCart className="h-5 w-5 text-black-500" />
                  </IconButton>
                );

                return cartProductsCount !== 0 ? (
                  <Badge
                    content={cartProductsCount}
                    className="min-w-5 min-h-fit text-[0.625rem] py-0.5 px-1.5 top-1 right-1 rounded-xl leading-normal bg-blue-300 text-white"
                  >
                    {button}
                  </Badge>
                ) : (
                  button
                );
              })()}
            </div>

            <ProfileMenu
              bidNumber={user?.bid}
              userName={user?.userName}
              // profileImage={user?.picture}
              logout={logout}
            />
          </div>

          <div className="lg:hidden">
            <IconButton
              onClick={onMenuClick}
              className="bg-gray-50 h-10 w-10 !max-h-10 !max-w-10 shadow-none border border-slate-50 "
            >
              <FaBarsStaggered className="h-5 w-6 text-black-500 bg-white" />
            </IconButton>
          </div>
        </div>
      </Navbar>
    </>
  );
}
