'use client'

import React, { useState } from 'react'
import Link from 'next/link'
import Image from 'next/image'
import emailSvg from '@/assets/mdi_email-mark-as-unread.svg'
import twitter from '@/assets/Group 41796.svg'
import linkedin from '@/assets/Group 41797.svg'
import facebook from '@/assets/Group 41798.svg'
import logo from '@/assets/mbc png-01.png'
import search from '@/assets/search (14) 1.svg'
import expertimg from '@/assets/ExpertElipse.svg'
import defaultAvatar from "@/assets/default-avatar.png";
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
import {
  Bars4Icon,
  LockOpenIcon,
  MagnifyingGlassIcon,
  XMarkIcon,
} from '@heroicons/react/24/outline'
import { sessionType } from '@/types/userType'
import { signOut } from '@/app/profile/action'
import ActionButton from '@/app/@modal/action-button'

const Navbar = ({ user, userInfo }: { user: sessionType; userInfo: any }) => {
  const [isOpen, setIsOpen] = useState<boolean>(false)
  const [fade, setFade] = useState(false)
  const toggleMenu = () => setIsOpen((isOpen) => !isOpen)

  let imageLink;

  if (userInfo?.imageName) {
    imageLink = `${process.env.NEXT_PUBLIC_WEBSITE_URL}/api/serveFiles?filename=${encodeURIComponent(userInfo.imageName)}`

  }
  else {
    imageLink = defaultAvatar.src;
  }

  return (
    <div className="flex flex-col  shadow-navbarShadow relative max-w-full">
      {/* Top Bar */}
      <div className=" hidden md:flex justify-between px-2 sm:p-0 sm:justify-around h-[46px] bg-[hsl(202_98%_25%)]">
        <div className=" inline-flex items-center gap-[5px] "></div>

        {/* task task  */}

        <div className="inline-flex items-center gap-[7px]">
          <p className="text-white">Follow on</p>
          <Link href="https://www.facebook.com/your-profile">
            <Image src={facebook} alt="svg" />{' '}
          </Link>
          <Link href="https://www.facebook.com/your-profile">
            <Image src={twitter} alt="svg" />
          </Link>

          <Link href="https://www.facebook.com/your-profile">
            <Image src={linkedin} alt="svg" />
          </Link>
        </div>
      </div>

      {/* / Navbar */}
      <div className="w-full flex justify-center">
        <div className="flex w-11/12 md:w-3/4 max-w-full 3xl:max-w-[60%] justify-between items-center  px-2 md:px-4 py-3 md:py-[24px]  bg-white">
          <div className="flex items-center w-[150px]   md:w-[194px] md:h-10 flex-shrink-0 sm:w-auto ">
            <Link href="/" className="w-full -hfull">
              <Image src={logo} alt="logobestCall" />
            </Link>
          </div>

          <div className=" hidden md:flex items-center justify-between gap-6">
            {/*  Search bar  */}

            <div className="hidden md:flex max-w-[240px]  py-[8px] px-[10px] items-center justify-around rounded-[55px] shadow-navbarShadow ">
              <input
                placeholder="Search"
                className=" text-xl max-w-[70%] font-normal leading-7 outline-none"
                onChange={() => console.log('search')}
              />
              <Image
                src={search}
                alt="searchIcon"
                onClick={() => console.log('search')}
              />
            </div>
            {/*  Menu  for desktop */}
            {!user ? (
              <ul className=" hidden text-xl sm:flex gap-3">
                <li>
                  <button className="transition hover:scale-110 duration-200 hover:bg-slate-100 px-2 py-1 rounded-sm">
                    <Link href="/">Home</Link>
                  </button>
                </li>
                <li>
                  <button className="transition hover:scale-110 duration-200 hover:bg-slate-100 px-2 py-1 rounded-sm">
                    <Link href="/search">Explore</Link>
                  </button>
                </li>
                <li>
                  <button className="transition hover:scale-110 duration-200 hover:bg-slate-100 px-2 py-1 rounded-sm">
                    <Link href="/signin">Signin</Link>
                  </button>
                </li>
              </ul>
            ) : (
              <ul className=" hidden  text-xl md:flex  items-center   gap-5">
                <li>
                  <Link href="/">Home</Link>
                </li>
                <li>
                  <Link href="/search">Explore</Link>
                </li>
                <li className="flex items-center gap-2 ">
                  <div className="w-12 h-12 rounded-full  border  border-solid  flex items-center justify-center ">
                    <DropdownMenu.Root>
                      <DropdownMenu.Trigger>
                        <picture>
                          <source src={imageLink} type="" />
                          <img
                            src={imageLink}
                            alt="profile picture"
                            className="w-full h-12 rounded-full"
                          />
                        </picture>
                      </DropdownMenu.Trigger>
                      <DropdownMenu.Content className="z-30 bg-slate-300 px-2 py-2 rounded-sm">
                        <button
                          onClick={() => setFade(true)}
                          className="transition hover:scale-110 duration-200"
                        >
                          <Link
                            href="/dashboard"
                            className="text-gray-500  text-base font-semibold bg-white px-2 py-1 rounded"
                          >
                            {' '}
                            {userInfo.firstName
                              ? userInfo.firstName + ' ' + userInfo.lastName
                              : 'Profile'}{' '}
                          </Link>
                        </button>

                        <form action={signOut}>
                          <button className="transition hover:scale-110 duration-200 text-gray-500 capitalize  text-base font-semibold bg-white px-2 py-1 mt-2 rounded">
                            Logout
                          </button>
                        </form>
                      </DropdownMenu.Content>
                    </DropdownMenu.Root>
                  </div>
                </li>
              </ul>
            )}
          </div>

          {/* Search Bar mobile */}

          {/* <MagnifyingGlassIcon className=' md:hidden text-gray-600 w-6 h-6' onClick={ } /> */}

          <div className=" md:hidden" onClick={toggleMenu}>
            {!user ? (
              !isOpen ? (
                <Bars4Icon className="text-gray-400 w-8 h-8 cursor-pointer" />
              ) : (
                <XMarkIcon className="text-gray-400 w-8 h-8 cursor-pointer" />
              )
            ) : (
              <li className="flex flex-row-reverse items-center gap-2 ">
                <div className="w-12 h-12 rounded-full  border border-blue-400 border-solid  flex items-center justify-center ">
                  <img
                    src={
                      userInfo.imageName
                        ? `${process.env.NEXT_PUBLIC_WEBSITE_URL
                        }/api/serveFiles?filename=${encodeURIComponent(
                          userInfo.imageName
                        )}`
                        : userInfo?.imageUrl
                    }
                    alt="User Image"
                    className="w-12 h-12 rounded-full"
                  />
                </div>
                <div className="flex- flex-col gap-2">
                  {/* <p className='font-bold text-base md:text-xl' >Alex martin </p> */}
                </div>
              </li>
            )}
          </div>

          {/*  mobile menu */}

          {isOpen &&
            (!user ? (
              <div className=" md:hidden absolute top-12 w-full z-10 bg-white text-black py-4  left-0  border border-gray-200 mt-2">
                <ul className=" flex flex-col justify-center items-center gap-3 w-full">
                  <li>
                    {' '}
                    <Link href="/"> Home</Link>{' '}
                  </li>
                  <li>
                    <Link href="/search">Explore</Link>
                  </li>
                  <li>
                    <Link href="/signin">Sigin</Link>
                  </li>
                </ul>

                <div
                  className="absolute top-1 right-2"
                  onClick={toggleMenu}
                ></div>
              </div>
            ) : (
              <div className=" md:hidden absolute top-14 w-full z-10 bg-white text-black py-4  left-0  border border-gray-200 mt-2">
                <ul className=" flex flex-col justify-center items-center gap-3 w-full">
                  <li>
                    <Link href="/dashboard">
                      {userInfo.firstName + ' ' + userInfo.lastName}{' '}
                    </Link>
                  </li>
                  <li>
                    <Link href="/">Home</Link>
                  </li>
                  <li>
                    <Link href="/search">Explore</Link>
                  </li>
                  <li>
                    <form action={signOut} className="bg-white">
                      <button className="text-gray-500 capitalize  text-base font-semibold bg-white">
                        Logout
                      </button>
                    </form>
                  </li>
                </ul>

                <div
                  className="absolute top-1 right-2"
                  onClick={toggleMenu}
                ></div>
              </div>
            ))}
        </div>
      </div>
    </div>
  )
}

export default Navbar