import Link from 'next/link';
import { FC, Fragment, ReactElement, useRef } from 'react';
import useSticky from 'hooks/useSticky';
import NextLink from 'components/atoms/NextLink';

import Image from 'next/image';
import hamburguer from '@/../public/images/layout/arrow-project.svg';
import { apiUrl } from '@/data/constants';
import { Link as ScrollLink } from 'react-scroll';
import useScrollLockOnElementClass from '@/hooks/useScrollLockOnElementClass';
type NavbarProps = {
  sticky?: boolean;
  lightColor?: string;
  darkColor?: string;
  stickyBox?: boolean;
  navClassName?: string;
  navOtherClass?: string;
  logo?: any;

  trans: any;
};

const Navbar: FC<NavbarProps> = (props) => {
  const { trans, lightColor, darkColor, navClassName, navOtherClass, stickyBox, logo } = props;
  useScrollLockOnElementClass('navbar-project', 'show');
  const useStickyHook: any = useSticky(650);
  const sticky = props?.sticky ? useStickyHook : false;
  const navbarRef = useRef<HTMLElement | null>(null);
  const fixedClassName = 'navbar navbar-expand-lg center-nav transparent navbar-clone fixed';

  const headerContent = (
    <Fragment>
      <div className="tw-w-6/12 navbar-brand -w-auto tw-flex py-0 tw-gap-2 tw-items-center d-lg-none ">
        {logo?.url && logo?.width && logo?.height ? (
          <NextLink
            href="/"
            className="tw-w-full"
            title={
              <Image
                src={apiUrl + logo?.url}
                width={logo?.width}
                height={logo?.height}
                alt="logo proyecto"
                className="tw-w-full tw-max-w-[200px]"
              />
            }
          />
        ) : null}
      </div>
      <div
        id="navbar-project"
        data-bs-scroll="true"
        className="navbar-collapse offcanvas offcanvas-nav  offcanvas-top    max-[991px]:tw-pb-4 max-[991px]:!tw-absolute max-[991px]:!tw-h-max max-[991px]:tw-min-h-max max-[991px]:!tw-top-0"
        style={{ backgroundColor: darkColor }}
      >
        <div className="container offcanvas-header d-lg-none  tw-py-4  tw-px-[0.75rem] tw-justify-between">
          {logo?.url && logo?.width && logo?.height ? (
            <NextLink
              href="/"
              className="tw-w-full"
              title={
                <Image
                  src={apiUrl + logo?.url}
                  width={logo?.width}
                  height={logo?.height}
                  alt="logo proyecto"
                  className="tw-w-full tw-max-w-[200px]"
                />
              }
            />
          ) : null}
          <button
            //type="button"
            // aria-label="Close"
            style={{ color: 'white' }}
            data-bs-dismiss="offcanvas"
            className="tw-w-[40px] btn-close bg-none before:tw-bg-none before:tw-w-[0px] before:tw-h-[0px]"
          >
            <Image src={hamburguer} alt="hamburguer" className="tw-rotate-180" />
          </button>
        </div>
        <div className="offcanvas-body mx-lg-auto d-flex flex-column h-100 tw-w-full max-[991px]:tw-mx-auto max-[991px]:tw-max-w-[720px]  max-[767px]:tw-max-w-[540px] max-[991px]:tw-px-3">
          <ul className="navbar-nav tw-flex tw-flex-wrap tw-gap-4 tw-w-full tw-justify-between">
            <li className="nav-item">
              <ScrollLink
                smooth
                spy
                activeClass="active"
                to="welcome"
                className="tw-uppercase tw-font-ibm tw-text-base hover:tw-opacity-50  tw-font-normal tw-text-white"
              >
                {trans('projects:navbar.concept')}
              </ScrollLink>
            </li>
            <li className="nav-item">
              <ScrollLink
                smooth
                spy
                activeClass="active"
                // to="gallery"
                to="gallery-carousel"
                className="tw-uppercase tw-font-ibm tw-text-base hover:tw-opacity-50  tw-font-normal tw-text-white"
              >
                {trans('projects:navbar.gallery')}
              </ScrollLink>
            </li>
            <li className="nav-item">
              <ScrollLink
                smooth
                spy
                activeClass="active"
                to="catalog"
                className="tw-uppercase tw-font-ibm tw-text-base hover:tw-opacity-50  tw-font-normal tw-text-white"
              >
                {trans('projects:navbar.catalog')}
              </ScrollLink>
            </li>

            <li className="nav-item">
              <ScrollLink
                smooth
                spy
                activeClass="active"
                to="location"
                className="tw-uppercase tw-font-ibm tw-text-base hover:tw-opacity-50  tw-font-normal tw-text-white"
              >
                {trans('projects:navbar.location')}
              </ScrollLink>
            </li>   <li className="nav-item">
              <ScrollLink
                smooth
                spy
                activeClass="active"
                to="assets"
                className="tw-uppercase tw-font-ibm tw-text-base hover:tw-opacity-50  tw-font-normal tw-text-white"
              >
                {trans('projects:navbar.assets')}
              </ScrollLink>
            </li>

            {/*  <li className="nav-item">
              <ScrollLink
                smooth
                spy
                activeClass="active"
                to=""
               
                className="tw-uppercase tw-font-ibm tw-text-base hover:tw-opacity-50  tw-font-normal tw-text-white"
              >
                {trans('projects:navbar.generalData')}
              </ScrollLink>
            </li> */}
            <li className="nav-item">
              <ScrollLink
                smooth
                spy
                activeClass="active"
                to="commonFacilities"
                className="tw-uppercase tw-font-ibm tw-text-base hover:tw-opacity-50  tw-font-normal tw-text-white"
              >
                {trans('projects:navbar.commonFacilities')}
              </ScrollLink>
            </li>{' '}
            {/* <li className="nav-item">
              <ScrollLink
                smooth
                spy
                activeClass="active"
                to="models"
               
                className="tw-uppercase tw-font-ibm tw-text-base hover:tw-opacity-50  tw-font-normal tw-text-white"
              >
                {trans('projects:navbar.models')}
              </ScrollLink>
            </li> */}

            <li className="nav-item">
              <ScrollLink
                id="pnavbar-availability-link"
                smooth
                spy
                activeClass="active"
                to="availability"
                className="tw-uppercase tw-font-ibm tw-text-base hover:tw-opacity-50  tw-font-normal tw-text-white"
              >
                {trans('projects:navbar.availability')}
              </ScrollLink>
            </li>
            {/*invest && (
              <li className="nav-item">
                <ScrollLink
                  id="pnavbar-availability-link"
                  smooth
                  spy
                  activeClass="active"
                  to="inventario"
                  className="tw-text-main-dark hover:tw-text-main-dark hover:tw-opacity-75  tw-uppercase tw-font-inter  tw-text-2xl min-[992px]:tw-text-sm  tw-font-medium tw-bg-white tw-py-2 tw-px-3 tw-rounded-[5px]"
                >
                  {trans('projects:navbar.availability')}
                </ScrollLink>
              </li>
            ) */}
            {/*formLink && (
              <li className="nav-item">
                <Link
                  id="pnavbar-quote-link"
                  href={formLink}
                  target="_blank"
                  className="  tw-text-main-dark  hover:tw-text-main-dark hover:tw-opacity-75  tw-uppercase tw-font-inter  tw-text-2xl min-[992px]:tw-text-sm  tw-font-medium tw-bg-white tw-py-2 tw-px-3 tw-rounded-[5px] "
                >
                  {trans('projects:navbar.quote')}
                </Link>
              </li>
            ) */}
            <li className="nav-item">
              <ScrollLink
                id="pnavbar-availability-link"
                smooth
                spy
                activeClass="active"
                to="quote-form"
                className="tw-uppercase tw-font-ibm tw-text-base hover:tw-opacity-50  tw-font-normal tw-text-white"
              >
                {trans('projects:navbar.quote')}
              </ScrollLink>
            </li>
          </ul>
        </div>
      </div>
      <div className={navOtherClass}>
        <ul className="navbar-nav flex-row align-items-center ms-auto">
          <li className="nav-item d-lg-none">
            <button
              data-bs-toggle="offcanvas"
              data-bs-target="#navbar-project"
              className=" tw-bg-transparent  offcanvas-nav-btn"
            >
              <Image src={hamburguer} alt="hamburguer" />
            </button>
          </li>
        </ul>
      </div>
    </Fragment >
  );

  return (
    <Fragment>
      {stickyBox && <div style={{ paddingTop: sticky ? navbarRef.current?.clientHeight : 0 }} />}
      <nav ref={navbarRef} className={sticky ? fixedClassName : navClassName} style={{ backgroundColor: darkColor }}>
        <div className="container flex-lg-row flex-nowrap align-items-center tw-py-4 !tw-static">{headerContent}</div>
      </nav>
    </Fragment>
  );
};

Navbar.defaultProps = {
  sticky: true,
  stickyBox: true,
  navOtherClass: 'navbar-other -w-100 d-flex ms-auto d-lg-none',
  navClassName: 'navbar navbar-project navbar-expand-lg center-nav  navbar-light tw-relative'
};

export default Navbar;