import React, { useEffect, useState } from 'react';
import { mdiChevronDown, mdiChevronRight } from '@mdi/js';
import Link from 'next/link';
import { useRouter } from 'next/router';
import BaseIcon from './BaseIcon';
import AsideMenuList from './AsideMenuList';
import { MenuAsideItem } from '../interfaces';

type Props = {
  item: MenuAsideItem;
  isDropdownList?: boolean;
};

const getViewName = (href: string) => {
  return new URL(href, location.href).pathname.split('/')[1];
};

const AsideMenuItem = ({ item, isDropdownList = false }: Props) => {
  const [isLinkActive, setIsLinkActive] = useState(false);
  const [isDropdownActive, setIsDropdownActive] = useState(false);
  const { asPath, isReady } = useRouter();

  useEffect(() => {
    if (!isReady) {
      return;
    }

    const activeView = new URL(asPath, location.href).pathname.split('/')[1];
    const currentItemView = item.href ? getViewName(item.href) : '';
    const activeChild = (item.menu || []).some((child) => {
      if (!child.href) {
        return false;
      }

      return getViewName(child.href) === activeView;
    });

    setIsLinkActive(currentItemView === activeView || activeChild);

    if (activeChild) {
      setIsDropdownActive(true);
    }
  }, [item.href, item.menu, isReady, asPath]);

  const activeClass = isLinkActive
    ? 'bg-emerald-50 text-slate-950 ring-1 ring-emerald-200'
    : 'text-slate-600 hover:bg-slate-100 hover:text-slate-950 dark:text-slate-300 dark:hover:bg-dark-800 dark:hover:text-white';

  const componentClass = [
    'group flex min-h-10 cursor-pointer items-center rounded-xl px-3 py-2 text-sm font-semibold transition-colors',
    isDropdownList ? 'ml-3 text-[13px]' : '',
    item.color ? '' : activeClass,
  ].join(' ');

  const iconClass = isLinkActive
    ? 'text-emerald-700'
    : 'text-slate-400 group-hover:text-slate-700';

  const asideMenuItemInnerContents = (
    <>
      {item.icon && (
        <BaseIcon
          path={item.icon}
          className={`mr-3 flex-none ${iconClass}`}
          size='18'
        />
      )}
      <span className='grow text-ellipsis line-clamp-1'>{item.label}</span>
      {item.menu && (
        <BaseIcon
          path={isDropdownActive ? mdiChevronDown : mdiChevronRight}
          className={`flex-none ${iconClass}`}
          w='w-5'
        />
      )}
    </>
  );

  return (
    <li className='py-0.5'>
      {item.withDevider && <hr className='mb-3 border-slate-200' />}
      {item.href && (
        <Link href={item.href} target={item.target} className={componentClass}>
          {asideMenuItemInnerContents}
        </Link>
      )}
      {!item.href && (
        <div
          className={componentClass}
          onClick={() => setIsDropdownActive(!isDropdownActive)}
        >
          {asideMenuItemInnerContents}
        </div>
      )}
      {item.menu && (
        <AsideMenuList
          menu={item.menu}
          className={`${
            isDropdownActive ? 'block' : 'hidden'
          } mt-1 space-y-1 border-l border-slate-200 pl-2`}
          isDropdownList
        />
      )}
    </li>
  );
};

export default AsideMenuItem;
