import { __ } from '@wordpress/i18n';
import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { NavLink, useLocation } from 'react-router-dom';
import navRoutes from '../../data/navRoutes';
import { resetBadgeState } from '../../features/badges/badgesSlice';
import cn from '../../utils/cn';
import isProActive from '../../utils/isProActive';

const SideNav = () => {
  const { pathname } = useLocation();
  const dispatch = useDispatch();
  const isPro = isProActive();

  useEffect(() => {
    window.scrollTo(0, 0);
    dispatch(resetBadgeState());
  }, [pathname]);

  return (
    <div className='wmx-bg-white wmx-flex-shrink-0 wmx-shadow-sm wmx-w-56 wmx-rounded-lg'>
      <div className=' wmx-sticky wmx-top-[84px]'>
        <div className='wmx-mt-8'>
          <p className='wmx-flex wmx-flex-col wmx-items-center'>
            <span className='wmx-text-xl wmx-font-bold wmx-text-gray-700'>
              {__('Better Badge', 'custom-product-badge-for-woocommerce')}
            </span>
            <span className='wmx-text-sm wmx-text-gray-600 wmx-italic wmx-mr-2'>by innoCodia</span>
          </p>
        </div>

        <nav className='wmx-flex wmx-flex-col wmx-mt-10'>
          {navRoutes.map((navItem) => (
            <NavLink
              key={navItem.path}
              to={navItem.path}
              className={({ isActive }) =>
                cn(
                  'wmx-px-3 wmx-py-2 wmx-relative wmx-flex wmx-items-center wmx-gap-1.5 wmx-font-medium wmx-text-gray-700 focus:wmx-shadow-none !wmx-outline-none active:wmx-text-primary hover:wmx-text-primary',
                  {
                    'wmx-bg-[#F0F0F1] wmx-font-semibold !wmx-text-primary':
                      isActive || (navItem.path === '/' && location.pathname === '/editor'),
                  },
                )
              }
            >
              {navItem.icon} {navItem.title}{' '}
              {!isPro && navItem.isPro && (
                <span className='wmx-font-bold wmx-text-sm wmx-text-violet-600'>{'(Pro)'}</span>
              )}
            </NavLink>
          ))}
        </nav>
        {/* Promotional Banner */}
        {/* {!isPro && (
          <div className='wmx-mt-2'>
            <a
              className='wmx-flex wmx-flex-col wmx-group wmx-shadow-none'
              target='_blank'
              href='https://innocodia.com/plugins/woocommerce-product-badges-pro/#price-table'
              rel='noreferrer'
            >
              <span className='wmx-text-sm wmx-font-bold wmx-text-blue-500 hover:wmx-text-blue-700 wmx-pl-3.5 wmx-py-2  wmx-block'>
                Get Pro (50% OFF)
              </span>
              <img
                className='wmx-rounded-lg wmx-opacity-0 group-hover:wmx-opacity-100 wmx-transition-opacity wmx-duration-300'
                src={blackFriday}
              />
            </a>
          </div>
        )} */}
      </div>
    </div>
  );
};
export default SideNav;
