import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { MenuCategoryProps } from '../model/types';
import { useStore } from '@/shared/model/store';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { UserFavorite } from '@/entities/user/model/types';
import { useEffect, useState } from 'react';

export const MenuCategory = ({
  menuId,
  menuIcon,
  menuName,
  subMenu,
  setMenuOn,
  editMode,
  setChangeMenuId
}: MenuCategoryProps) => {
  const { navigate } = useNavigate();

  const [favoriteItems, setFavoriteItems] = useState<Array<UserFavorite>>([]);
  const [menuIds, setMenuIds] = useState<Array<string | undefined>>([]);

  const onClickToNavigate = (path?: string) => {
    if(!!path && !!setMenuOn && !editMode){
      setMenuOn(false);
      navigate(path);
    }
  };

  const favoriteSetting = (
    checked: boolean,
    title?: string,
    path?: string,
    menuId?: string
  ) => {
    console.log(checked, title, path, menuId)
    let userFavorite = useStore.getState().UserStore.userFavorite;
    if(checked){
      userFavorite = [
        ...userFavorite,
        {
          title: title,
          img: IMAGE_ROOT + '/ico_menu_01.svg',
          path: path,
          menuId: menuId
        }
      ];
    }
    else{
      userFavorite = userFavorite.filter((value, index) => {
        return value.menuId !== menuId
      });
    }
    useStore.getState().UserStore.setUserFavorite(userFavorite);
    callFavoiteItems();
    if(setChangeMenuId){
      setChangeMenuId(menuId);
    }
  };

  const callFavoiteItems = () => {
    let userFavorite = useStore.getState().UserStore.userFavorite;
    console.log(userFavorite)
    setFavoriteItems(userFavorite);
    let newArr: Array<string | undefined> = userFavorite.map((value, index) => {
      return value.menuId;
    });
    setMenuIds(newArr); 
  };

  useEffect(() => {
    callFavoiteItems();
  }, []);

  const getMenuItems = () => {
    let rs = [];
    if(subMenu){
      for(let i=0;i<subMenu.length;i++){
        if(!!editMode){
          rs.push(
            <li
              key={ `menu-item-key-${menuId}-${i}` }
              onClick={ () => onClickToNavigate(subMenu[i]?.path) }
            >
              <span>{ subMenu[i]?.menuName }</span>
              <div className="check_box_scrap">
                <input 
                  id={ `menu-item-checkbox-${subMenu[i]?.menuId}-${i}` }
                  className="checkbox"
                  type="checkbox"
                  checked={ menuIds.includes(subMenu[i]?.menuId)? true: false }
                  onChange={ (e) => favoriteSetting(
                    e.target.checked, 
                    subMenu[i]?.menuName, 
                    subMenu[i]?.path,
                    subMenu[i]?.menuId
                  )}
                />
                <label 
                  className="gtr"
                  htmlFor={ `menu-item-checkbox-${subMenu[i]?.menuId}-${i}` }
                ></label>
              </div>
            </li>
          );
        }
        else{
          rs.push(
            <li
              key={ `menu-item-key-${i}` }
              onClick={ () => onClickToNavigate(subMenu[i]?.path) }
            >{ subMenu[i]?.menuName }</li>
          );
        }
        
      }
    }
    
    return rs;
  };

  return (
    <>
      <div className="menu-category">
        <div className="category-header">
          <div className={ 'category-icon ' + menuIcon }></div>
          <span>{ menuName }</span>
        </div>
        <ul className="category-items">
          { getMenuItems() }
        </ul>
      </div>
    </>
  );
};