// imports
import clsx from 'clsx';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import React, { useEffect, useState } from 'react';

// icons
import IconPencil from '@chirper/react/src/icons/Edit';

// locals
import Teams from './Teams';
import Scroll from '../../Scroll';
import ButtonIcon from '../../Button/Icon';
import LeftbarMenu from './Menu';
import Signal, { useSignal } from '../../../signal';

// signals
export const open       = new Signal.State(true);
export const openMobile = new Signal.State(false);

/**
 * leftbar
 *
 * @param props 
 */
const ComponentLayoutLeftbar = (props = {}) => {
  // signals
  const [sOpen, setOpen] = useSignal(open);
  const [sOpenMobile, setOpenMobile] = useSignal(openMobile);
  
  // router
  const path = usePathname();
  
  // state
  const [hovered, setHovered] = useState(false);

  // use effect
  useEffect(() => {
    // set open mobile to false
    setOpen(true);
  }, [path]);
  useEffect(() => {
    // set open mobile to false
    setOpenMobile(false);
  }, [path]);

  // return jsx
  return (
    <>
      <div className={clsx(
        'fixed top-0 right-0 bottom-0 left-0 z-50 transition-opacity duration-300 lg:hidden',
        sOpenMobile ? 'opacity-100 translate-x-0' : 'opacity-0 -translate-x-full',
      )} onClick={() => setOpenMobile(!sOpenMobile)} />

      {!sOpen && (
        <div
          className={clsx(
            'hidden fixed top-0 left-0 z-40 w-12 h-full lg:block'
          )}
          onMouseEnter={() => setHovered(true)}
        />
      )}
      
      <div
        className={clsx(
          'fixed top-0 flex bottom-0 left-0 z-50 shadow w-3/4 lg:w-72 transform transition-all bg-primary-BG dark:bg-gray-BG border-r border-gray-400 dark:border-gray-600',
          (hovered || sOpen) ? 'lg:translate-x-0' : 'lg:-translate-x-full',
          sOpenMobile ? 'translate-x-0' : '-translate-x-full',
        )}
        onMouseLeave={() => setHovered(false)}
      >
        <Teams />
        
        {/* Static sidebar for desktop */}
        <div className="flex inset-y-0 flex-col flex-1 min-w-0">
          {/* Sidebar component, swap this element with another sidebar if you like */}
          <Scroll>
            <div className="flex flex-col pb-3 w-full max-w-full grow">
              <LeftbarMenu
                navigation={props.menuNavigation}
              />

              <nav className="flex flex-col flex-1 px-4 min-w-0">
                <ul role="list" className="flex flex-col flex-1 gap-y-5 min-w-0">
                  {props.noContent ? props.children : (
                    <li>
                      <ul role="list" className="space-y-0">
                        {(props.navigation || []).map((item, i) => (
                          item === 'divider' ? (
                            <li key={`divider-${i}`} className="py-3" />
                          ) : typeof item === 'string' ? (
                            <li key={`heading-${item}`} className="pt-6 pb-3 text-sm font-semibold text-gray-200 dark:text-gray-50">
                              {item}
                            </li>
                          ) : item.content ? (
                            <li key={item.id}>
                              {item.content}
                            </li>
                          ) : (
                            item.href ? (
                              <li key={item.id || item.name} className={clsx(
                                'flex flex-row space-x-2 w-full group',
                                item.current && 'bg-primary-500 text-white font-semibold',
                                'transition-all duration-300 dark:hover:!text-white hover:bg-primary-600 rounded-lg', 
                              )}>
                                <Link
                                  href={item.href}
                                  target={item.target}
                                  onClick={item.onClick}
                                  className={clsx(
                                    'flex gap-x-3 text-sm font-semibold leading-6',
                                    'flex-1 items-center px-2 py-1 min-w-0', 
                                  )}
                                >
                                  {!!item.icon && (
                                    <item.icon
                                      filled={item.current}
                                      className={clsx(
                                        'w-4 h-4 shrink-0' 
                                      )}
                                      aria-hidden="true"
                                    />
                                  )}
                                  {item.name}
                                </Link>
                                  
                                {!!item.onEdit && (
                                  <div className="hidden group-hover:block">
                                    <ButtonIcon
                                      color="primary"
                                      onClick={item.onEdit}
                                      className="!p-2"
                                    >
                                      <IconPencil className="w-4 h-4" />
                                    </ButtonIcon>
                                  </div>
                                )}
                              </li>
                            ) : (
                              <li key={item.id || item.name}>
                                <button
                                  onClick={item.onClick}
                                  className={clsx(
                                    item.current && 'bg-primary-500 text-white',
                                    'w-full transition-all duration-300 hover:!text-white hover:bg-primary-600',
                                    'group flex gap-x-3 rounded-lg px-2 items-center py-1 text-sm leading-6 font-semibold'
                                  )}
                                >
                                  {!!item.icon && (
                                    <item.icon 
                                      filled={item.current}
                                      className={clsx(
                                        'w-4 h-4 shrink-0'
                                      )} 
                                      aria-hidden="true"
                                    />
                                  )}
                                  {item.name}
                                </button>
                              </li>
                            )
                          )
                        ))}
                      </ul>
                    </li>
                  )}
                </ul>
              </nav>
            </div>
          </Scroll>
          
        </div>
        
      </div>
    </>
  );
};

/**
 * export default
 */
export default ComponentLayoutLeftbar;