import { PATHS } from '@/shared/constants/paths';
import { motion } from 'framer-motion';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { MenuCategory } from '@/entities/menu/ui/menu-category';
import { FavoriteWrapper } from '@/entities/home/ui/favorite-wrapper';
import { useStore } from '@/shared/model/store';
import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants, MenuItems } from '@/entities/common/model/constant';
import { useEffect, useState } from 'react';
import { useLocation } from 'react-router';

export interface MenuProps {
  menuOn: boolean;
  setMenuOn: (menuOn: boolean) => void;
  favoriteEdit?: boolean;
};
export const Menu = ({
  menuOn,
  setMenuOn,
  favoriteEdit
}: MenuProps) => {
  const location = useLocation();
  const { navigate } = useNavigate();
  const userInfo = useStore((state) => state.UserStore.userInfo);

  const [shortBtns, setShortBtns] = useState<Array<Record<string, any>>>([]);
  
  const onClickToNavigate = (path: string) => {
    onClickToMenuClose();
    navigate(path);
  };
  const onClickToMenuClose = () => {
    setMenuOn(false);
  };  
  
  const getMenuCategory = () => {
    let rs = [];
    for(let i=0;i<MenuItems.length;i++){
      rs.push(
        <MenuCategory
          key={ `menu-category-${i}` }
          menuId={ MenuItems[i]?.menuId }
          menuIcon={ MenuItems[i]?.menuIcon }
          menuName={ MenuItems[i]?.menuName }
          subMenu={ MenuItems[i]?.subMenu }
          setMenuOn={ setMenuOn }
          favoriteEdit={ favoriteEdit }
        />
      );
    }
    return rs;
  };

  const shortBtnsSetting = () => {
    let shortList = [];
    for(let i=0;i<MenuItems.length;i++) {
      if(MenuItems[i]?.subMenu[0]){
        shortList.push({
          menuId: MenuItems[i]?.subMenu[0]?.menuId,
          menuName: MenuItems[i]?.menuName,
          path: MenuItems[i]?.subMenu[0]?.path,
        });
      }      
    }
    setShortBtns(shortList);
  };
  
  useEffect(() => {
    shortBtnsSetting();
  }, []);

  return (
    <>
      <motion.div 
        className="full-menu-modal" 
        initial="hidden"
        animate={ (menuOn)? 'visible': 'hidden' }
        variants={ FilterMotionVariants }
        transition={ FilterMotionDuration }
        style={ FilterMotionStyle }
      >
        <div className="full-menu-container">
          <div className="full-menu-header">
            <div className="full-menu-title">
              { 'nictest001m' } 
              <span style={{marginLeft: '4px'}}>(madzoneviper)</span>
            </div>
            <div className="full-menu-actions">
              <button 
                className="full-menu-settings"
                onClick={ () => onClickToNavigate(PATHS.setting) }
              >
                <img 
                  src={ IMAGE_ROOT + '/ico_set.svg' } 
                  alt="설정" 
                />
              </button>
              <button 
                className="full-menu-close"
                onClick={ () => onClickToMenuClose() }
              >
                <img 
                  src={ IMAGE_ROOT + '/ico_close.svg' } 
                  alt="설정"
                />
              </button>
            </div>
          </div>
            
          <div className="full-menu-top-nav">
            { 
              <FavoriteWrapper
                usingType='menu'
              ></FavoriteWrapper> 
            }
          </div>
            
          <div className="full-menu-keywords-wrap">
            <div className="full-menu-keywords">
            {
              shortBtns.map((value, index) => (
                <span 
                  key={ `short-btn-${value.menuName}` }
                  className={ `keyword-tag ${(location.pathname === value.path)? 'active': ''}` }
                  onClick={ () => onClickToNavigate(value.path) }
                >{ value.menuName }</span>    
              ))
            }
            </div>
          </div>
            
          <div className="full-menu-list">
          { getMenuCategory() }
          </div>
        </div>
      </motion.div>
    </>
  );
};